DJ pupm this party

토스트 노티피케이션은 어떤 동작에 대한 피드백을 나타내는 것을 뜻합니다

이번 포스트에서는 버튼을 눌렀을 때 그 동작에 대한 반응을 확인 하라 수 있는 toast notification을 만들어 보려고 합니다. 

저기 위에 버튼들을 누르면 해당 토스트들이 생성이 됩니다. 

그리고 timeout을 걸어서 시간이 되면 사라지게 만들었습니다. 

함께 코드 보면서 진행해봅시다. 

ToastBox와 메시지 변수 선언 

let toastBox = document.getElementById("toastBox");
let successMsg = '<i class="fa-solid fa-circle-check"></i>successfully submitted';
let errorMsg = '<i class="fa-solid fa-circle-xmark"></i>Please fix the error';
let invalidMsg = '<i class="fa-solid fa-circle-exclamation"></i>Invalid input, check again';

- 먼저 toastBox라는 ID를 가진 변수를 가져옵니다. toastBox는 동적으로 생성될 알람(toast)메시지를 담는 역할을 합니다. 

successMsg, errorMsg, invalidMsg는 각각 성공, 에러, 그리고 잘못된 입력에 대한 알림 메시지를 Html코드와 함께 문자열로 저장합니다. 

showToast함수 정의 

function showToast(msg) {
  let toast = document.createElement("div");
  toast.classList.add("toast");
  toast.innerHTML = msg;
  toastBox.appendChild(toast);
  if (msg.includes("error")) {
    toast.classList.add("error");
  }
  if (msg.includes("invalid")) {
    toast.classList.add("invalid");
  }
  setTimeout(() => {
    toast.remove();
  }, 6000);
}

- 버튼을 누르면 발생하게 되는 showToast( )함수입니다. 

- document.createElement('div')를 사용해 새로운 div요소를 생성합니다. 이 요소는 동적으로 생성되는 알림의 컨테이너 역할을 수행합니다 .

- toast.classList.add('toast')는 이 div요소에 toast라는 css클래스를 추가해, 알림에 대한 스타일을 지정할 수 있게 합니다. 

- toast.innerHTML=msg는 함수에 전달된 메시지(msg)를 div안에 넣는 역할을 합니다. 

- 마지막으로 toastBox.appendChild(toast)는 생성된 toast를 toastBox안에 추가해 화면에 표시되게 합니다. 

메시지에 따른 추가 클래스 지정 

- error라는 단어가 포함되어 있으면 toast요소에 error라는 클래스를 추가합니다. 

- Invalid라는 요소가 포함되어 있으면 invalid클래스를 추가해 입력이 잘못된 경우 별도로 스타일링 할 수 있도록 합니다. 

알림 자동 제거 

setTimeout(() => {
  toast.remove();
}, 6000);

- setTimeout함수를 이용해 6초(6000ms)후에 toast요소를 자동으로 제거하는 역할을 합니다. 알림 메시지가 일정 시간 후에 자동을 ㅗ사라지게 하기 위한 설정된 일부입니다. 

이러한 방식으로 사용자가 알림을 확인한 뒤 일정 시간이 지나면 자동으로 사라져 화면이 깔끔하게 유지될 수 있습니다. 

우리 일상에서 qr코드는 흔하게 사용되는 기술이고 매우 유용하게 사용되고 있습니다

간편하게 신원을 조회하거나 사이트에 접근하기 편하기 때문인거 같아요 

그 qr코드를 어떤 식으로 만드는 지 실습을 통해 알아보도록 하겠습니다

이 프로그램에 들어가게되면 텍스트나 url을 입력하는 Input창과 생성하기 버튼이 먼저 눈에 들어옵니다. 

input에 원하는 사이트를 입력하면 해당 사이트에 대한 qr코드가 생성이됩니다.

이 qr코드가 잘 생성이 된건지 확인 해보기 위해서 카메라를 통해 확인을 해보았습니다. 

오호라 사이트가 뜨는 걸 보니 잘 작동이 되고 있습니다.

이번에는 어떤식으로 코드가 진행이되었는지 살펴 보도록 하겠습니다.

1. 변수 선언 및 DOM 요소 선택

let imgBox = document.getElementById("ImgBox");
let qrImage = document.getElementById("qrImage");
let imgText = document.getElementById("qrText");

이 프로젝트에서 사용되는 변수들은 다음과 같습니다. 

- imgbox는 QR코드가 생성될 때 이미지를 보여줄 <div id="imgBox">입니다. 나중에 이 div에 show-img클래스를 추가하여 이미지가 보이도록 제어할 수 있습니다. 

- qrImage는 <img>태그로 QR코드 이미지가 표시될 곳으로 사용자가 입력한 텍스트로 QR코드를 생성한 후, 이 태그의 src속성을 변경해 이미지가 나타나게 됩니다. 

- imgText는 사용자가 텍스트 또는 URL을 입력하는 input필드를 선택합니다. 이 값을 읽어서 qr코드를 생성하는데 사용합니다. 

2. QR 코드 생성 함수 (generateQR)

function generateQR() {
  if (qrText.value.length > 0) {
    qrImage.src =
      "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
      qrText.value;
    imgBox.classList.add("show-img");
  } else {
    qrText.classList.add("error");
    setTimeout(() => {
      qrText.classList.remove("error");
    }, 1000);
  }
}

generatorQR함수는 QR코드 생성버튼을 눌렀을 때 호출됩니다. 

1. 입력값 확인 

if(qrText.value.length>0)

사용자가 텍스트 또는 URL을 입력했는지 확인하는 조건문입니다. 만약 입력 값이 있다면 QR코드를 생성하는 단계로 넘어가고, 입력값이 없으면 오류처리가 실행됩니다. 

2. QR코드 생성 및 이미지 업뎃

qrImage.src =
  "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
  qrText.value;

입력값이 있을 경우 QR코드 이미지를 생성합니다. qrImage.src는 img태그의 src속성을 변경하여 이미지를 로드하는 역할을 합니다. 여기서 src에 설정된 URL은 QR코드 생성 API인 

https://api.qrserver.com/v1/create-qr-code/

입니다. 여기서 이 API는 size와 data라는 두개의 파라미터를 사용합니다. size=150x150으로 이 사이즈로 코드를 생성합니다. data=뒤에는 사용자가 입력한 텍스트나 URL이 추가됩니다. 즉 입력한 데이터가 QR코드에 인코딩 됩니다. 

3. 이미지 박스 표시 

imgBox.classList.add("show-img");

qr코드가 성공적으로 생성되면, imgBox에 show-img클래스를 추가합니다. 이 클래스는 CSS에서 정의된대로 이미지 박스의 max-height값을 늘려 QR코드 이미지를 보여주도록 합니다. 초기에는 이미지 박스의 높이가 0이므로 QR코드가 보이지 않다가 show-img클래스가 추가되면 이미지가 자연스럽게 나타납니다. 

4. 오류 처리 

qrText.classList.add("error");
setTimeout(() => {
  qrText.classList.remove("error");
}, 1000);

만약 입력 값이 없다면 qrText에 error클래스를 추가하여 입력 필드가 흔들리는 애니메이션이 적용됩니다. 

이건 css 에서 @keyframes shake로 정의된 애니메이션 입니다. 

setTimeout함수는 1초 후에 error클래스를 제거합니다. 이는 애니메이션이 반복되지 않고 한번만 실행되게 합니다. 

이번 실습은 생각보다 코드가 짧았지만 유용한 결과를 얻을 수 있었습니다. 

재밌는 실습이었어요 

안녕하세요 오늘 만들려고 하는 건 인용구를 랜덤으로 생성해주는 앱입니다. 

https://github.com/lukePeavey/quotable

이API를 사용해서 아주 쉽고 간단한 랜덤 인용구를 생성시킬 수 있습니다. 

페이지를 열게 되면 "Quote of the day"라는 제목으로 아래 " "안에는 인용구 밑에는 작가 이름이 생성이 됩니다. 

지난 번에 했을 때는 잘됐는데 지금은 잘 안되고 있는게 아마 API문제인것 같아요.. 해결 방법을 아직은 잘 몰라서 일단 그냥 했습니다

New Quote버튼을 누르면 새로운 인용이 생성되고 

Tweet을 누르면 X와 연결되서 바로 Tweet할 수 있게 했습니다. 

전X계정이 없어서 저건 굳이 안하긴 했는데 글 많이 쓰시는 분들에게는 유용할 수  있다고 생각합니다. 

자 그럼 코드를 확인 해봅시다. 

요소선택 

const quote = document.getElementById("quote");
const author = document.getElementById("author");
const api_url = "https://api.quotable.io/random";

- quote와 author 요소를 선택해서 나중에 인용구와 저자를 표시할 수 있게 합니다. 

- api_url은 랜덤으로 인용구를 가져올 API의 UR을 정의하는 것입니다. 

비동기 함수로 API호출 및 데이터 처리 

async function getquote(url) {
  const response = await fetch(url);
  var data = await response.json();
  console.log(data);
  quote.innerHTML = data.content;
  author.innerHTML = data.author;
}

getquote(api_url);

- get quote 함수는 API로부터 인용구 데이터를 비동기적으로 가져옵니다. 

- API는 fetch를 통해 API로부터 데이터를 가져오고 await로 비동기 작업이 완료될 때까지 기다립니다. 

- 데이터 처리는 가져온 데이터를 JSON형식으로 변환하여 인용구와 저자를 HTML요소에 표시합니다. 

트위공유 기능 구현

function tweet() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      quote.innerHTML +
      " ---- by " +
      author.innerHTML,
    "Tweet Window",
    "width=600,height=300"
  );
}

- tweet함수는 현재 표시된 인용구를 트위터(X)화면에 공유하기 위한 새로운 창을 여는 과정입니다. 

- 트윗 메시지 구성: 인용구와 저자를 포함한 트윗 메시지를 작성하고 window.open을 사용해 트윗 작성 창을 엽니다. 

-아, 트위터 공유 기능은

https://developer.x.com/en/docs/x-for-websites/tweet-button/overview

해당 사이트의 코드를 가져와서 추가하였습니다. 

버튼을 누를때마다 새로운 인용들이 생성되는게 꽤 재밌더라구요 !

이번에 만들어 볼 프롤젝트는 태어난 날부터 지금까지 며칠이 지났는지는 계산하는 앱을 만들어 보려고 합니다. 

이 프로젝트에서는 년도별 월별 일별에 따라 계산이 달라지기 때문에 이전 프로젝트들에 비해 조금 더 복잡한 조건문들이 사용되었습니다. 

가장 초기화면의 모습입니다. 프로젝트의 이름이 적혀있고 날짜를 지정할 수 있는 창과 버튼이 있습니다.

달력 버튼을 누르게 되면 날짜를 지정할 수 있는 달력이 나타나게 됩니다. 이 프로젝트는 과거의 날짜에서 오늘까지의 날짜를 계산하는 것이기 때문에 오늘 이후의 날짜들은 선택할 수 없게 비활성화가 되어 있습니다.

저는 제 나이를 밝히고 싶지는 않아서 2000년 1월 1일부터 오늘까지의 날을 계산해보았습니다. 

21세기가 된지 벌써 24년 하고도 8개월 9일이나 지나있습니다. 

시간이 정말 빠르네요 ㅎㅎ 

그럼 어떤 코드들이 사용되어 있는지 확인해 봅시다. 

1. HTML요소 선택 및 초기화 

let userInput = document.getElementById("date");
userInput.max = new Date().toISOString().split("T")[0];
let result = document.getElementById("result");

• let userInput = document.getElementById("date"): date라는 id를 가진 HTML 요소(입력 필드)를 선택하여 userInput이라는 변수에 저장합니다.
• userInput.max = new Date().toISOString().split("T")[0]: 사용자가 오늘 이후의 날짜를 입력하지 못하도록 max 속성을 오늘 날짜로 설정합니다. new Date().toISOString().split("T")[0] 코드는 현재 날짜를 YYYY-MM-DD 형식으로 변환하는 역할을 합니다.
• let result = document.getElementById("result"): 결과를 표시할 result라는 id를 가진 HTML 요소를 선택하여 result 변수에 저장합니다.

2. 나이계산함수 CalculateAge()

function calculateAge() {
  let birthDate = new Date(userInput.value);
  let d1 = birthDate.getDate();
  let m1 = birthDate.getMonth() + 1;
  let y1 = birthDate.getFullYear();

  let today = new Date();

  let d2 = today.getDate();
  let m2 = today.getMonth() + 1;
  let y2 = today.getFullYear();

  let d3, m3, y3;
  y3 = y2 - y1;
  if (m2 >= m1) {
    m3 = m2 - m1;
  } else {
    y3--;
    m3 = 12 + m2 - m1;
  }
  if (d2 >= d1) {
    d3 = d2 - d1;
  } else {
    m3--;
    d3 = getDaysInMonth(y1, m1) + d2 - d1;
  }
  if (m3 < 0) {
    m3 = 11;
    y3--;
  }
  result.innerHTML = `You are <span>${y3}</span> years,<span>${m3}</span> months and <span>${d3}</span> days old`;
}

• function calculateAge() { ... }: 이 함수는 사용자가 입력한 생년월일(userInput.value)을 받아 현재 나이를 계산하고, 그 결과를 HTML 요소에 표시합니다.
• let birthDate = new Date(userInput.value);: 사용자가 입력한 생년월일을 Date 객체로 변환하여 birthDate 변수에 저장합니다.
• let d1 = birthDate.getDate(): birthDate 객체에서 일을 추출합니다.
• let m1 = birthDate.getMonth() + 1: birthDate 객체에서 월을 추출합니다. (자바스크립트에서 월은 0부터 시작하므로 +1을 해줍니다.)
• let y1 = birthDate.getFullYear(): birthDate 객체에서 연도를 추출합니다.
• let today = new Date(): 현재 날짜를 나타내는 Date 객체를 생성합니다.
• let d2 = today.getDate(): 현재 날짜에서 일을 추출합니다.
• let m2 = today.getMonth() + 1: 현재 날짜에서 월을 추출합니다.
• let y2 = today.getFullYear(): 현재 날짜에서 연도를 추출합니다.
• let d3, m3, y3: 나이 계산을 위한 변수를 선언합니다.
• y3 = y2 - y1: 기본적으로 현재 연도에서 출생 연도를 빼서 나이를 계산합니다.
• if (m2 >= m1) { ... } else { ... }: 생월과 현재 월을 비교하여 만 나이를 계산합니다. 현재 월이 생월보다 이전이면 나이를 한 살 줄여줍니다.
• if (d2 >= d1) { ... } else { ... }: 생일과 현재 일을 비교하여 월을 조정합니다. 현재 일이 생일보다 이전이면 한 달을 빼고 일수를 조정합니다.
• if (m3 < 0) { ... }: 월 계산 후 월이 음수로 나오면 11개월로 설정하고 나이를 한 살 줄여줍니다.
• result.innerHTML = ...: 최종적으로 계산된 나이(년, 월, 일)를 HTML 요소에 표시합니다.

3.월별 일수 계산 함수 

function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

• function getDaysInMonth(year, month) { ... }: 특정 연도와 월에 해당하는 일수를 계산하는 함수입니다.
• return new Date(year, month, 0).getDate(): 주어진 연도와 월에 맞는 마지막 날짜를 반환합니다. 여기서 new Date(year, month, 0)은 지정된 월의 마지막 날을 의미합니다.

이렇게 하면 완성입니다!

텍스트를 작성할 수 있는 노트앱을 만들어 볼겁니다.!! 

이 앱은 처음에는 이렇게 아무것도 없는 빈공백에 버튼만 놓여져 있고 이 버튼을 누르게 되면 텍스트를 작성할 수 있는 박스가 생성됩니다.

이 박스에서는 텍스트만 쓸 수 있고 내용을 삭제할 수도 있습니다. 

이렇게 만들어 질 수 있고 다양한 어플들에서 이러한 메모장을 생성해서 어플을 만들었다는 기억이 납니다 .

자, 그럼 이 어플은어떻게 생성되었는지 한번 확인해 보도록 하겠습니다. 

const notesContainer = document.querySelector(".notes-container");
const createBtn = document.querySelector(".btn");
let notes = document.querySelectorAll(".input-box");

- noteContainer는 노트들이 추가될 컨테이너 역할을 합니다. 

- createBtn은 class가 btn인 요소를 참조합니다. 

- notes는 class가 input-box인 <p>요소들을 선택하여 참조합니다. 

function showNotes() {
  notesContainer.innerHTML = localStorage.getItem("notes");
}

showNotes();

 이 함수는 로컬스토리지에서 저장된 노트를 불러와서 notesContainer에 표시하는 함수입니다. 

localStorage.getItem('notes')는 로컬 스토리지에서 'notes'라는 키로 저장된 값을 가져옵니다. 

이 값은 notesContainer의 innerHTML로 설정되어 페이지가 로드될 때 저장된 노트들이 표시되도록 합니다.

showNotes()를 호출하여 페이지가 로드될 때 자동으로 저장된 노트들이 화면에 표시됩니다.

function updateStorage() {
  localStorage.setItem("notes", notesContainer.innerHTML);
}

updateStorate함수는 현재 notesContainer의 내용을 로컬 스토리지에 저장하는 역할을 합니다. localStorage.setIem('notes',notesContainer.innerHTML)는 notesContainer의 현재 innerHTML을 'notes'라는 로컬 스토리지에 저장합니다. 이를 토통해 페이지를 새로고침해도 노트가 유지됩니다. 

createBtn.addEventListener("click", () => {
  let inputBox = document.createElement("p");
  let img = document.createElement("img");
  inputBox.className = "input-box";
  inputBox.setAttribute("contenteditable", "true");
  img.src = "images/delete.png";
  notesContainer.appendChild(inputBox).appendChild(img);
});

이 코드는 createBtn이 클릭되면 새로운 노트를 생성하는 역할을 합니다. 

- inputbox는 새로운 <p>요소를 생성하며 class를 input-box로 설정하고 contentededitable속성을 true로 설정한다. 이 속성은 사용자가 해당 요소를 클릭하여 내용을 편집할 수 있게 해준다. 

- img는 살제버튼으로 사용할 이미지를 생성한다. 이 이미지는 나중에 노트를 삭제할 때 사용된다. 

- 마지막으로 생성된 inputbox와 img를 notesContainer에 추가한다. 이로써 새로운 노트가 화면에 나타나게 된다. 

notesContainer.addEventListener("click", function (e) {
  if (e.target.tagName === "IMG") {
    e.target.parentElement.remove();
    updateStorage();
  } else if (e.target.tagName === "P") {
    notes = document.querySelectorAll(".input-box");
    notes.forEach((nt) => {
      nt.onkeyup = function () {
        updateStorage();
      };
    });
  }
});

 이 코든느 notesContainer내에서 발생하는 클릭 이벤트를 처리한다.

- e.target.tagName==='IMG'는 만약 클릭한 요소가 이미지(IMG)라면 해당 이미지를 포함하는 부모요소를 제거한다. 그런다음 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

- e.target.tagName==='p'는 만약 클릭한 요소가 p태그라면 모든 노트요소를 다시 선택하고 각각의 노트에 대해 keyup이벤트를 등록한다. 이 이벤트는 사용자가 노트의 내용을 수정할 때마다 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.execCommand("insertLineBreak");
    event.preventDefault();
  }
});

이 코드는 사용자가 노트(inputBox) 안에서 Enter 키를 누를 때 발생하는 동작을 정의합니다.

- 기본적으로 Enter 키를 누르면 새로운 노트가 생성되거나 현재 노트의 내용이 변동될 수 있지만, 이 코드는 document.execCommand("insertLineBreak")를 사용하여 대신 줄 바꿈을 삽입합니다

- event.preventDefault()는 기본 동작을 막아, Enter 키를 누를 때 새 노트가 생성되거나 다른 원치 않는 동작이 발생하지 않도록 합니다.

우리가 가끔 패스워드를 비밀번호찾기를 하게되는데 

그때 임시비밀번호로 프로그램에서 만들어주는 비밀번호를 이메일로 받게되는 경우가 있었다

그때의 기억을 되살려 보며 랜덤패스워드를 만들어보자 

이 프로그램은 '비밀번호 생성하기' 버튼을 누르게 되면 

영어 소문자, 대문자, 숫자, 특수문자를 조합하여 12자리의 랜덤비밀번호를 생성한다

그리고 옆의 복사하기 버튼을 누르면 해당 비밀번호를 복사할 수 있다

코드 설명 

변수 설정 

const passwordBox = document.getElementById("password");
const length = 12;

const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowerCase = "abcdefghijklmnopqrstuvwxyz";
const number = "0123456789";
const symbol = "@#$%^&*()_+~|}{></-=";

const allChars = upperCase + lowerCase + number + symbol;

-  passwordBox는 id가 password인 요소를 선택하여 참조하는 변수이다. 이 요소는 사용자가 생성된 비밀번호를 볼 수 있는 input box이다. 

- length는 생성되는 비밀번호의 길이를 나타내는 변수로 여기서는 12자로 설정되어 있다. 

- 아래 uppserCase는 대문자, lowerCase는 소문자, number는 숫자, symbol은 특수문자 문자열을 담는 변수이다. 이것들은 랜덤비밀번호를 생성할 때 랜덤하게 선택하여 생성해서 사용하게 된다. 

- allChars변수는 대문자, 소문자, 숫자, 특수문자를 모두 포함하는 문자열이다. 비밀번호를 생헝할 때 이 문자열에서 랜덤하게 문자를 선택하게 된다.

CreatePassword() 함수 

function createPassword() {
  let password = "";
  password += upperCase[Math.floor(Math.random() * upperCase.length)];
  password += lowerCase[Math.floor(Math.random() * lowerCase.length)];
  password += number[Math.floor(Math.random() * number.length)];
  password += symbol[Math.floor(Math.random() * symbol.length)];

  while (length > password.length) {
    password += allChars[Math.floor(Math.random() * allChars.length)];
  }
  passwordBox.value = password;
}

- 생성하기 버튼을 누르게되면 실행되는 함수이다. 

- password라는 빈 문자열을 초기화하고 대문자, 소문자, 숫자, 특수문자 각각에서 하나씩 랜덤하게 선택해서 password에 추가한다. 이렇게 하면 최소한 하나의 대문자, 소문자, 숫자, 특수문자가 비밀번호에 포함되도록 보장할 수 있다. 

- 이후 while 루프를 사용하여 password의 길이가 length(12)보다 작을 때 까지 allCahrs문자열에서 랜덤하게 문자를 선택해 password에 추가한다. 

- 마지막으로 생성된 비밀번호를 passwordBox입력 상자의 값으로 설정한다. 

copyPassword()함수 

function copyPassword() {
  passwordBox.select();
  document.execCommand("copy");
}

이 함수는 생성된 비밀번호를 복사하는 역할을 한다. 

- passwordBox.select()는 passwordBox입력상자의 내용을  선택한다. 

-document.execCommand('copy')는 선택된 내용을 클립보드로 복사한다. 사용자는 이제 이 비밀번호를 다른 곳에 붙여 넣을 수 있게 된다. 

끝 

매우 간단한 프로그램이다! 

다만, 이렇게 생성된 문자열의 경우 앞의 4자리가 대문자, 소문자, 숫자, 특수문자로 고정된 위치에 만들어 진다는 점이 매력이 떨어지는 것 같다. 모든 문자들이 포함되면서 랜덤하게 생성될 수 있는 알고리즘에 대해서 고려해 봐야될 거 같다. 

이번에 만들어 볼 앱은 퀴즈앱이다

여기서 만드는 퀴즈는 주관식은 아니고 객관식에 해당하는 퀴즈를 만든다. 

해당 문제에서 퀴즈를 맞추면 문항이 초록색으로 표시되어 다음문제로 넘어가고 

퀴즈를 틀리면 선택한 문항은 빨간색으로 표시되면 동시에 정답인 문항은 초록색으로 표시된다. 

그리고 마지막으로 문제들 중에서 몇 개를 맞추었는지도 나타나게 되는 아주아주 간단하고 쉬운 앱이다.

1. 문제 생성 

먼저 어떤 질문들이 들어 가야 할지에 대한 내용을 생성해야한다. 

question이라는 변수를 만들어서 이안에 배열 형태로 질문과 정답을 만든다. 그리고 정답 부분에는 text와 correct로 나누어 해당 질문에 대한 정답인지 아닌지를 판단하게 한다. 

const questions = [
  {
    question: "한입 베어 문 사과는?",
    answers: [
      { text: "사과", correct: false },
      { text: "파인애플", correct: true },
      { text: "오렌지", correct: false },
      { text: "복숭아", correct: false },
    ],
  },
  {
    question: "프론트엔드에서 가장 점유율이 높은 라이브러리는? ",
    answers: [
      { text: "Vue.js", correct: false },
      { text: "Svelte", correct: false },
      { text: "typescript", correct: false },
      { text: "React.js", correct: true },
    ],
  },
  {
    question: "저녁 머 먹지?",
    answers: [
      { text: "김밥", correct: false },
      { text: "햄버거 ", correct: false },
      { text: "우동 ", correct: false },
      { text: "몰라", correct: true },
    ],
  },
];

2. DOM

그리고 ID값을 받아서 dom을 만든다.

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");

3. 변수 초기화 

currentQuestionIndex는 현재 표시되고 있는 질문의 인덱스를 생성하고 

score는 사용자의 점수를 저장한다. 

let currentQuestionIndex = 0;
let score = 0;

4. StartQuiz() 함수 

이 함수는 퀴즈가 시작할 때 호출된다. 

currentQuestionIndex와 Score를 초기화 하고, Next버튼의 텍스트를 Next로 설정한 후 showQuestion()함수를 통해 첫번째 질문을 화면에 표시한다. 

function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  nextButton.innerHTML = "Next";
  showQuestion();
}

5. ShowQuestion()함수 

이 함수는 현재 질문과 선택지를 화면에 표시하는 역할을 한다. resetState()를 호출해서 이전 질문의 상태를 초기화하고 현재 질문과 선택지를 화면에 표시하고 각 선택지 버튼을 동적으로 생성하여 answerButtons요소에 추가한다. 

정답일 경우에는 button.dataset.correct 에 correct값을 설정한다. 

각 버튼에 selectAnswer함수가 클릭이벤트로 연결된다. 

function showQuestion() {
  resetState();
  let currentQuestion = questions[currentQuestionIndex];
  let questionNo = currentQuestionIndex + 1;
  questionElement.innerHTML = questionNo + ". " + currentQuestion.question;

  currentQuestion.answers.forEach((answer) => {
    const button = document.createElement("button");
    button.innerHTML = answer.text;
    button.classList.add("btn");
    answerButtons.appendChild(button);
    if (answer.correct) {
      button.dataset.correct = answer.correct;
    }
    button.addEventListener("click", selectAnswer);
  });
}

6. resetState함수 

이 함수는 새로운 질문을 표시하기 전에 이전 질문과 선택지 버튼들을 초기화한다 .

Nex버튼을 숨기고 answerButton요소에 있는 모든 버튼을 제거한다. 

function resetState() {
  nextButton.style.display = "none";
  while (answerButtons.firstChild) {
    answerButtons.removeChild(answerButtons.firstChild);
  }
}

7. selectAnswer함수 

사용자가 선택지를 클릭했을 때 호출되는 함수이다. 사용자가 선택한 답변이 정답인지 확인하고 정답일 경우 해당 버튼에 correct클래스를 추가하여 스타일을 변경하고 점수를 증가시킨다. 모든 버튼을 비활성화하고 정답버튼을 항상 correct클래스를 추가하여 표시한다. 

Next버튼을 다시표시한다. 

function selectAnswer(e) {
  const selectedBtn = e.target;
  const isCorrect = selectedBtn.dataset.correct === "true";
  if (isCorrect) {
    selectedBtn.classList.add("correct");
    score++;
  } else {
    selectedBtn.classList.add("incorrect");
  }
  Array.from(answerButtons.children).forEach((button) => {
    if (button.dataset.correct === "true") {
      button.classList.add("correct");
    }
    button.disabled = true;
  });
  nextButton.style.display = "block";
}

8. ShowScore() 함수 

퀴즈가 끝났을 때 사용자의 점수를 표시하는 함수이다. 이전 상태를 초기화한 후, 사용자가 획득한 점수를 화면에 표시한다. Next버튼의 텍스트를 play Again으로 변경하고 버튼을 다시 표시한다. 

function showScore() {
  resetState();
  questionElement.innerHTML = `You scored ${score} out of ${questions.length}!`;
  nextButton.innerHTML = "play Again";
  nextButton.style.display = "block";
}

9. HandleNextButton()함수 

next버튼을 클릭했을 때 호출되는 함수이다. currentQuestionIndex를 증가시키고, 남은 질문이 있다면 showQuestion()함수를 호출하여 다음 질문을 표시한다. 모든 질문이 끝났다면 showScore()함수를 호출하여 점수를 표시한다. 

function handleNextButton() {
  currentQuestionIndex++;
  if (currentQuestionIndex < questions.length) {
    showQuestion();
  } else {
    showScore();
  }
}

10. nextButton클릭 이벤트 리스너 

next버튼이 클릭되었을 때 호출되는 이벤트 리스너 이다. 현재 질문이 남아있다면 handleNextButton()을 호출하고 , 그렇지 않다면 퀴즈를 다시 시작하기 위해 startQuiz()함수를 호추한다. 

11. 그리고 마직막으로 startQuiz()호출해서 퀴즈가 처음 로드될때 바로 시작하도록 한다. !! 

웹 개발을 하게 되면 todo list앱을 만드는 건 가장 기본적인 절차인 것 같다

간단하면서도 활용도가 높고 또 다양한 기능들을 학습할 수 있기 때문이지 않을까 싶다

나는 하루의 일을 시작하기 전에 오늘 해야할 것들을 미리 정하고 그것들 퀘스트 깨듯이 해결하는 것을 좋아한다. 

이건 아마 또 하루를 열심히 살수 있도록 하게 해주는 하나의 원동력이 되기도 하는 것 같다

그럼 오늘은 todo list를 만들어 보자 

역시 오늘도 외국인 형님의 도움을 받아서 이를 미리 학습해보고 이를 정리하는 방식으로 포스트 해본다.

https://youtu.be/PBcqGxrr9g8?si=ry9zv0kPc9Vx4TuP

혹시 따라해볼 생각있으면 이 영상보고 해도 좋을 듯하다. 

To Do List

이 앱의 기본적인 기능은 다음과 같다.

기본 화면은 다음과 같이 꾸며진다.

1. 입력창에 해야할 일을 입력하고 Add 버튼을 눌러 등록할 수 있다. 

2. 체크버튼을 눌러 해결한 일을 체크할 수 있다.

3. 모든 일이 완수되면 x 버튼을 눌러 내용을 지울 수 있다.

이렇게 깔끔하고 효과적인 TODOLIST를 만들어 볼 수 있었다.

어떻게 이 기능들이 동작하는지를 확인 해보자 

변수 지정 

html에서 입력창에 해당하는 input태그에 id='input-box'를 주었고 list가 생성되는 ul태그에 id=list-container를 주었다. 

그리고 이들을 javascipt상에서 getElementById를 활용하여 각각 inputBox, ListContainer변수로 만들었다. 

const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");

내용 입력 

입력창에 텍스트를 입력하기 위해 addTask라는 함수를 만들었다. 

사용자가 입력창(inputBox)에 텍스트를 입력하고, 이를 리스트(ListContainer)에 추가한다. 입력이 비어 있으면 경고 메시지가 경고메시지가 띄워진다. 텍스트를 입력하면 해당 텍스트는 <li>태그로 감싸지고, 삭제버튼 x를 추가한다. 이렇게 생성된 내용은 LocalStorage에 저장된다. 

function addTask() {
  if (inputBox.value == "") {
    alert("You must write something!");
  } else {
    let li = document.createElement("li");
    li.innerHTML = inputBox.value;
    listContainer.appendChild(li);
    let span = document.createElement("span");
    span.innerHTML = "\u00d7";
    li.appendChild(span);
  }
  inputBox.value = "";
  saveData();
}

체크버튼

리스트 항목을 클릭하면 checked클래스가 toggle되어, 완료된 항목임을 표시할 수 있다. 삭제버튼(x)를 클릭하면 해당 항목을 리스트에서 제거한다. 상태 변경이나 삭제가 일어날 때마다 localStorage에 데이터를 다시 저장한다. 

istContainer.addEventListener(
  "click",
  function (e) {
    if (e.target.tagName === "LI") {
      e.target.classList.toggle("checked");
      saveData();
    } else if (e.target.tagName === "SPAN") {
      e.target.parentElement.remove();
      saveData();
    }
  },
  false
);

데이터 저장 및 불러오기

위에서 사용되었던 saveData는 현재 리스트의 html을 localstorage에 저장하는 역할을 수행하고 showTask는 페이지가 로드될 때 localStroge에 저장된 데이터를 불러와서 리스트에 표시한다. 

function saveData() {
  localStorage.setItem("data", listContainer.innerHTML);
}
function showTask() {
  listContainer.innerHTML = localStorage.getItem("data");
}
showTask();

완성 !!! 

지난 실습에서는 프론트 엔드 상에서 api를 연동하는 방법을 배웠다면 이번에는 localstorage에 데이터를 저장하고 불러오는 방식에 대해서 학습했다. 중간에 잘못 입력된 코드가 있었는데 코드를 수정해도 화면상 표시되는게 바뀌지 않았다. 그리고 새로운 텍스트를 입력했을 때 그그거는 그거대로 list가 생성되었다. 이게 알고보니깐 이게 localstorage상에서 데이터가 그대로 저장이 되면서 생기는 현상이었던거 같다. 이건 cache를 삭제해주면 해결하였다!