[2023 신입부원 기초 스터디] 김승혁 #8주차 - JS

모달 만들기

html + css + 'js' 를 이용해서 모달창을 열고 닫아보겠습니당

다른 코드까지 가져오기는 너무 길고 js만 가져오면 ~

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';
});

만약 오튼 버튼을 클릭한다면 ~~ container는 'flex'가 되어서 창이 보이게 될것이고 버튼은 none으로 바껴서 안 보기게 될 것이다

또 close 버튼을 누르면 ~~ container는 none이 되고 오픈버튼이 보이게 된다

 

 

할 일 앱 만들기

두근두근 할 일 앱이라니,,, 

꼭 해보고 싶었던..!

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

form.addEventListener('submit', (event) => {
  event.preventDefault(); //제출하고 새로고침되는 걸 막기위함

  if (input.value !== '') {
    const li = document.createElement('li');
    li.innerText = input.value;
    ul.appendChild(li);
    input.value = ''; //하나 입력 후 입력창 초기화
  } // 공백 입력 막기위함
});

새로운 요소를 생성해서 사이트에 추가하는 형식이다

리스트 저장기능도 없고, 삭제 기능도 없이 매우 간단하다

 

form 요소에 submit 이벤트가 발생하면 콜백 함수를 실행한다

사용자가 입력한 값이 공백이 아니면, 새로운 li 요소를 생성한다

li 요소의 innerText 속성을 사용하여 입력한 값을 할당하며, 그 다음, ul 리스트의 아래쪽에 새로운 li 요소를 추가한다.

가하고 나서는, input 요소의 value 속성을 빈 문자열로 할당하여, 입력창을 초기화한다

 

 

 

디지털 시계 만들기

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초에 한 번씩 함수 실행//

매우 이지하다

시간을 가져오고 그걸 보여주면 된다

 

근데 1초에 한 번씩 시간이 바뀌어야되니 1초마다 한 번씩 함수가 실행되도록 해준다

 

 

가위바위보 게임 만들기

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);
  const computer = result[randomIndex];
  game(user, computer);
}

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

1. HTML에서 button 태그로 만들어진 요소를 선택한다

2. 사용자가 클릭한 버튼의 텍스트 값을 저장한다

3. 컴퓨터의 선택을 랜덤하게 생성한다

4. 결과에 따른 메시지를 출력한다

 

 

업그레이드 할 일 앱 만들기

저 위에 만들었던 앱에 삭제 기능 & 저장 기능을 추가 해볼게요~

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();

  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);

1. HTML 요소 선택 -> 변수 지정

2. save() 함수는 todo 배열을 로컬 스토리지에 저장

3. delltem() 함수는 할 일 삭제 시 사용, todo 배열에서 제외하고 로컬 스토리지오 화면에서도 제거

4. addtem() 인수로 받은 할 일 데이터를 화면에 추가

5. handler()는 사용자가 입력한 값으로 새로운 todo 만듦 & todos 배열에 추가한 뒤 화면에 추가

6. init()는 애플리케이션 초기화

 

 

js가 끝났어요!

1학기 모두 수고하셨고 방학 때도 힘내요