[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 16일차 - Vanilla JS 1

아기코린이·2023년 6월 20일

IT개발캠프 React 개발자부트캠프 리액트 스나이퍼팩토리 웅진씽크빅 유데미 인사이드아웃 프로젝트캠프 프로젝트캠프후기

10주 완성 프로젝트 캠프

목록 보기

7/12

들어가기

이번 블로깅은 16일차 과제인 Vanilla JS를 활용한 웹애플리케이션 제작이다. 크게 이름을 입력하면 인사가 나오는 기능, 시계 기능, 랜덤한 이미지로 배경화면이 바뀌는 기능을 포함하고 있다.

Javascript

배경화면 랜덤 변경 기능

이 기능을 구현하면서 신경쓴 부분은 슬라이드바를 이용하여 랜덤하게 이미지가 바뀌는 시간을 조정하는 것이었다. 시간을 조정하여 다시 시작하기 전에 이미 실행중인 interval을 중지하고 새로운 interval을 생성하는 것이 핵심이었다. 고민끝에 완성한 코드는 아래와 같다.

const backgroundImg = document.querySelector('#backgroundImg');
const inputSpeed = document.querySelector('#inputSpeed');
const backgroundImgs = [
  ...
];
let speed = 30;
let currentInterval = null;

inputSpeed.addEventListener('change', () => {
  clearInterval(currentInterval);

  if (+inputSpeed.value !== 0) {
  	speed = +inputSpeed.value;
    setChangeInterval();
  }
});

const changeBackgorundImg = () => {
  let randomNumber = Math.floor(Math.random() * 7);
  backgroundImg.src = backgroundImgs[randomNumber];
};

const setChangeInterval = () => {
  currentInterval = setInterval(() => {
    changeBackgorundImg();
  }, speed * 100);
};

changeBackgorundImg();
setChangeInterval();

변수 speed는 배경화면이 변경되는 속도를 위한 변수로 speed가 0일 경우 배경화면이 변경되지 않고 멈추게 된다. 가장 빠른 속도는 1초이며, 가장 느린 속도는 10초이다.

변수 currentInterval은 현재 실행중인 interval을 저장하는 변수이다. clearTimeout 함수의 매개변수로 사용했다.

앞서 정의한 변수 inputSpeed에 addEventListener 함수를 사용했다. 변수 inputSpeed는 배경화면 전환속도를 입력받는 input 엘레먼트다. 슬라이더바의 변경이 감지되면 기존 interval을 종료하고 새로운 interval을 생성한다.

함수 changeBackgorundImg는 함수의 이름대로 랜덤한 이미지를 배경화면으로 바꿔준다.

함수 setChangeInterval은 일정 시간마다 특정행동을 반복하게 만들어 주는 함수다. setInterval을 setChangeInterval 밖에서 사용해도 되지만, 내가 의도한 기능은 interval의 발생시간을 변경하는 것이었다. 따라서 새로운 interval을 생성하기 위해 반복사용이 가능한 형태로 코드를 작성했다.

인삿말 기능

가장 기본적인 기능으로만 구현했다. 변수 inputName는 이름을 입력받는 input 엘레먼트다. 해당 엘레먼트의 value 값이 변경된다면 매개변수로 전달된 함수가 실행된다.

const inputNameBox = document.querySelector('#inputNameBox');
const inputName = document.querySelector('#inputName');

inputName.addEventListener('change', () => {
  const nameBox = document.createElement('p');
  const helloBox = document.createElement('p');

  nameBox.textContent = inputName.value + ' 님';
  helloBox.textContent = '안녕하세요!';

  inputNameBox.appendChild(nameBox);
  inputNameBox.appendChild(helloBox);
  inputName.remove();
});

시계 기능

현재 시간을 받아 화면에 표시해주는 시계 기능이다.

const clock = document.querySelector('#clock');

const addZero = (target) => {
  return target.length !== 2 ? '0' + target : target;
};

const currentTime = () => {
  let today = new Date();
  let hours = today.getHours() + '';
  let minutes = today.getMinutes() + '';
  let seconds = today.getSeconds() + '';

  clock.textContent = `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
};

const clockInterval = setInterval(() => {
  currentTime();
}, 1000);

currentTime();