[2023 신입부원 심화 스터디] 김윤희 #4주차 - Part 6(예제만들기)

1. modal 만들기 

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

openButton.addEventListener("click", () => {
  container.style.display = "flex";
  openButton.style.display = "none";
});

closeButton.addEventListener("click", () => {
  container.style.display = "none";
  openButton.style.display = "block";
});

 

2. clock 만들기 

const hour = document.querySelector(".hour");
const min = document.querySelector(".min");
const sec = document.querySelector(".sec");

function clock() {
  const now = new Data();

  hour.innerText = now.getHours();
  min.innerText = now.getMinutes();
  sec.innerText = now.getSeconds();
}
setInterval(clock, 1000); //1초 마다 clock함수를 호출.

3. 가위바위보 

const buttons = document.querySelectorAll("button");
const computerChoice = document.querySelector(".computer-choice");
const userChoice = document.querySelector(".you-choice");
const winner = document.querySelector(".result");

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

function show(user, computer, message) {
  computerChoice.innerText = computer;
  userChoice.innerText = user;
  winner.innerText = message;
}

function game(user, computer) {
  let message;

  if (user === computer) {
    message = "무승부";
  } else {
    switch (user + computer) {
      case "가위바위":
      case "바위보":
      case "보가위":
        message = "컴퓨터 승리!";
        break;
      case "가위보":
      case "바위가위":
      case "보바위":
        message = "당신 승리!";
        break;
    }
  }

  show(user, computer, message);
}

function play(event) {
  const user = event.target.innerText;
  const randomIndex = Math.floor(Math.random() * 3); //랜덤값의 범위를 3미만으로 설정
  const computer = result[randomIndex];
  game(user, computer);
}

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

4. todo앱 만들기 (2랑 합쳤습니당)

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

let todos = [];

function save() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

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

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

function addItem(todo) {
  if (todo.text !== '') { //공백일때는 진행되지 않음 
    const li = document.createElement('li');
    const button = document.createElement('button');
    const span = document.createElement('span');

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

    li.appendChild(span);
    li.appendChild(button);
    ul.appendChild(li);
    li.id = todo.id;
  }
}

function handler(event) {
  event.preventDefault(); //목록 새로고침x

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

  todos.push(todo);
  addItem(todo);
  save();
  input.value = '';
}

function init() {
  const userTodos = JSON.parse(localStorage.getItem('todos'));

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

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