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

여러분 삶이 팍팍할 때는 윙크하세요..~

1️⃣ 모달 만들기🔘

const openButton = document.querySelector(".open");
const container = document.querySelector(".container");
const closeButton = document.querySelector(".close");

openButton.addEventListener("click", () => {
  // open 버튼을 눌렀을 경우
  container.style.display = "flex";
  openButton.style.display = "none"; // open 버튼을 없애주는 기능
});

closeButton.addEventListener("click", () => {
  // close 버튼을 눌렀을 경우
  container.style.display = "none"; // container를 없애주고
  openButton.style.display = "block"; // open 버튼을 활성화 시킨다.
});

 

2️⃣ 할 일 앱 만들기📝

const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // form을 제출해도 새로고침이 되지 않는다.(기존 내용 보존)
  
  if(input.value !== ''){  // 사용자의 입력이 있을 때만 아래의 버튼 진행
    const li = document.createElement('li');
    li.innerText = input.value;  // 사용자에게 입력받은 값
    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();

  hour.innerText = now.gethours();
  min.innerText = now.getMinutes();
  sec.innerText = now.getSeconds();
}
// 여기까지 하면 시간이 변하지 않는다. (새로고침 할 경우에만 바뀜)

setInterval(clock, 1000); // 1초마다 이 함수를 실행시킴

 

4️⃣ 가위바위보 게임 만들기✌️✊✋

const buttons = document.querySelectorAll("button"); // 유사 배열 형태로 버튼 3개의 정보를 담고 있다.
const computerChoice = document.querySelector(".computer-choice");
const userChoice = document.querySelector(".you-choice");
const winner = document.querySelector(".result");

const result = ["가위", "바위", "보"]; // 0, 1, 2 인덱스 중 하나를 선택하게 해야함

const play = (event) => {
  // user와 computer의 선택을 나타내는 부분
  const user = event.target.innerText;
  const randomIndex = Math.floor(Math.random() * 3);
  // Math.random() * 3  -> 3을 곱한다는 것은 랜덤한 값의 범위를 3 미만으로 설정한다는 것을 의미함
  // Math.floor(Math.random * 3)  -> floor 메소드는 주어진 숫자와 같거나 작은 정수중에 가장 큰 것을 반환함
  const computer = result[randomIndex];
  game(user, computer);
};

buttons.forEach((button) => {
  button.addEventListener("click", play);
});

// 아래의 코드는 문제 없이 동작하지만 글로벌 변수에 동일한 이름을 가진 변수가 있기 때문에 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 = "무승부";
  } else {
    switch (user + computer) {
      // 텍스트 연산에서의 더하기는 텍스트를 이어붙이는 것임
      // 가위보, 바위가위, 보바위 -> user 승
      case "가위보":
      case "바위가위":
      case "보바위":
        message = "사용자 승리!";
        break;
      // 가위바위, 바위보, 보가위 -> computer 승
      case "가위바위":
      case "바위보":
      case "보가위":
        message = "컴퓨터 승리!";
        break;
    }
  }

  show(user, computer, message);
};

 

5️⃣ To Do List 앱 완성📅

/* 추가할 기능
  1. 삭제 버튼을 추가 
  2. 아이템 저장 기능(새로고침해도 사라지지 않게) -> local storage에 저장
  3. 삭제 버튼 -> 저장된 데이터 업데이트
*/

const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

let todos = []; // 아이템을 저장할 배열

// localStroage에 있는 값들을 업데이트 시켜주기 위한 부분
const save = () => {
  localStorage.setItem("todos", JSON.stringify(todos));
  // JSON.stringify는 자바스크립트의 객체를 JSON 문자열로 변환해줌
  // 새로고침을 해도 localStorage에 정보가 계속 저장됨(화면에서는 사라지더라도)
};

const delItem = (event) => {
  const target = event.target.parentElement; // 대상의 부모 요소를 target에 저장

  todos = todos.filter((todo) => todo.id !== parseInt(target.id)); // 지우려는 target의 id 값과 다른 id값을 가지는 아이템들만 모아서 다시 배열에 저장 (삭제한 것과 같은 효과를 내는 것임)
  save();
  target.remove();
};

// 아이템을 추가하는 부분
const addItem = (todo) => {
  if (todo.text !== "") {
    const li = document.createElement("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);
    li.id = todo.id;
  }
};

const handler = (event) => {
  event.preventDefault(); // 목록이 새로고침 되지 않도록 만드는 부분

  const todo = {
    // 객체로 포장
    id: Date.now(),
    text: input.value,
  };

  todos.push(todo);
  addItem(todo); // addItem에 input.value를 넘겨줌
  save();
  input.value = ""; // input창을 초기화 시킴
};

// 전에 있던 아이템들을 불러오는 부분
const init = () => {
  const userTodos = JSON.parse(localStorage.getItem("todos"));

  if (userTodos) {
    // 존재하지 않는 배열에(null) forEach 메소드를 쓰려고 시도할 때 발생하는 오류를 막기 위해 userTodos가 있을 때만 실행한다.
    userTodos.forEach((todo) => {
      addItem(todo);
    });
    todos = userTodos;
  }
};

init();
form.addEventListener("submit", handler); // 폼이 submit 될 때  handler라는 함수가 실행