[2023 신입부원 심화 스터디] 이정욱 #4주차 - 예제 만들기(연습 문제)

1. modal창 만들기

const openButton = document.querySelector(".open");  //open 버튼 불러오기
const container = document.querySelector(".container");  // close 버튼을 담은 container
const closeButton = document.querySelector(".close");   // close 버튼

openButton.addEventListener("click", () => {    //openButton 에서 click 이벤트 발생하면
  container.style.display = "flex";             //container를 보여주고
  openButton.style.display = "none";            //open 버튼을 사라지게한다
});

closeButton.addEventListener("click", () => {   //closeButton 에서 click 이벤트 발생하면
  container.style.display = "none";             //contianer를 사라지게하고
  openButton.style.display = "flex";           //open 버튼을 보여준다
});

모달은 화면 위에 작은 화면을 추가로 보여주는 방식을 통해 다른 내용을 화면창에 띄워주는 방식을 말합니다.

비슷한 개념인 팝업과는 다른점은 팝업은 새로운 창을 띄우고 모달은 기존 창에 작은 화면을 하나 더 띄워준다는 점입니다.

 

2. 할일 앱 만들기

const form = document.querySelector("form");     //입력할 form
const input = document.querySelector("input");   //입력이 이루어지는 text창
const ul = document.querySelector("ul");         //입력할 내용을 넣어줄 list창

form.addEventListener("submit", (event) => {     //submit 이벤트가 발생하면
  event.preventDefault();                        //event 인터페이스에 이벤트를 명시하지 않으면 아무런 기능을 하지 않게끔

  if (input.value != "") {                       //공백이 아니면
    const li = document.createElement("li");     //할일을 담아줄 li를 만들고
    li.innerText = input.value;                  //li에 입력된 할일을 text값으로 지정해준뒤
    ul.appendChild(li);                          //ul 태그 밑에 넣어줌

    input.value = ""; // 입력창 초기화 
  }
});

3. 디지털 시계 만들기

const hour = document.querySelector(".hour");      //시을 넣어줄 곳
const min = document.querySelector(".min");        //분을 넣어줄 곳
const sec = document.querySelector(".sec");        //초를 넣어줄 곳

function clock() {
  const now = new Date();                          //현재 시간을 받아오는 Date를 통해 now 객체 생성

  hour.innerText = now.getHours();                 //시간값 받아오기
  min.innerText = now.getMinutes();                //분값 받아오기
  sec.innerText = now.getSeconds();                //초값 받아오기
}

setInterval(clock, 1000);        //해당 행위를 1초에 한번씩 반복

4. 가위바위보 게임 만들기

const buttons = document.querySelectorAll("button");                //배열의 형태로 모든 button 담음
const computerChoice = document.querySelector(".computer-choice");  //computer의 선택을 띄워줄 부분
const userChoice = document.querySelector(".you-choice");           //user의 선택을 띄워줄 부분
const winner = document.querySelector(".result");                   //결과를 띄워줄 부분

const result = ["가위", "바위", "보"];

const show = (user, computer, result) => {              //결과를 띄워주는 함수
  computerChoice.innerText = computer; 
  userChoice.innerText = user;
  winner.innerText = result;
};

const game = (user, computer) => {               //가위바위보 게임을 진행한다.
  let message;

  if (user == computer) {                        //승부 결과에 따라 message에 해당하는 값을 넣어준다
    message = "무승부";
  } else {
    switch (user + computer) {
      case "가위보":
      case "바위가위":
      case "보바위":
        message = "사용자 승리!";
        break;
      case "가위바위":
      case "바위보":
      case "보가위":
        message = "컴퓨터 승리!";
        break;
    }
  }

  show(user, computer, message);              //결과와 입력값을 show에 넘겨주며 실행시킨다.
};

const play = (event) => {                                                    
  const user = event.target.innerText;                  //play는 event(click)에서 받아온 값을 user의 값으로 해준다. (바위) 클릭 시 '바위'
  const randomIndex = Math.floor(Math.random() * 3);    //computer의 값을 정해주기 위해 1~3의 랜덤한 수를 뽑아준다
  const computer = result[randomIndex];                 //result 배열에서 1~3에서 랜덤하게 나온 수를 통해 가위바위보를 정해준다.
  game(user, computer);                                 //computer와 user의 값을 통해 game 함수를 실행한다.
};

buttons.forEach((button) => {                 //button이 눌릴때 마다 
  button.addEventListener("click", play);    //play 함수 실행
});

5.업그레이드 된 할 일 앱 만들기

const form = document.querySelector("form"); //입력할 form
const input = document.querySelector("input"); //입력이 이루어지는 text창
const ul = document.querySelector("ul"); //입력할 내용을 넣어줄 list창

let todos = [];

const save = () => {
  localStorage.setItem("todos", JSON.stringify(todos));
};

const delItem = (event) => {
  const target = event.target.parentElement;

  todos = todos.filter((todo) => todo.id !== parseInt(target.id));
  save();

  target.remove();
};

const addItem = (todo) => {
  if (todo.text != "") {
    //공백이 아니면
    const li = document.createElement("li"); //할일을 담아줄 li를 만들고
    const button = document.createElement("button");
    const span = document.createElement("span");

    span.innerText = todo.text;
    button.innerText = "삭제";
    button.addEventListener("click", delItem);

    li.appendChild(span);
    li.appendChild(button);
    ul.appendChild(li); //ul 태그 밑에 넣어줌
    li.id = todo.id;
  }
};

const handler = (event) => {
  event.preventDefault(); //event 인터페이스에 이벤트를 명시하지 않으면 아무런 기능을 하지 않게끔

  const todo = {
    id: Date.now(),
    text: input.value,
  };

  if (todo.text != "") todos.push(todo);
  addItem(todo);
  save();
  input.value = "";
};

const init = () => {
  const userTodos = JSON.parse(localStorage.getItem("todos"));

  userTodos.forEach((todo) => {
    addItem(todo);
  });

  todos = userTodos;
};

init();
form.addEventListener("submit", handler);