[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 12일차 - Vanilla JS: 시계, 이름, 랜덤배경

TK·2023년 6월 20일

10주완성 프로젝트 캠프

목록 보기

10/27

일시 : 23.06.19 화요일

🌱과제 리뷰

이번 과제는 이전에 수강하였던 노마드코더의 '바닐라 JS로 크롬 앱 만들기'과 매우 유사하여 다시 한 번 복습하는 기회가 되었다. 더 자세한 코드 및 설명을 듣고 싶다면 해당 (무료)강의를 수강하는 것이 매우 큰 도움이 될 것이라고 확신한다.

내가 만든 페이지는 아직 더 추가할 기능이 많기 때문에 CSS는 가장 알아보기 쉽도록 최소한으로 적용하였다. 더 추가해야할 사항이 있다면, input box를 디자인적으로 개선시키고 이외 border-radius등 여러 디테일을 손봐야겠다. 또한 시계부분이 숫자 변화에 따라 전체 width가 바뀌어 초가 바뀔때마다 시계가 이리저리 조금씩 움직인다. 이 부분은 시,분,초 로 나누어 block을 설정하여 각 부분에 width를 따로 줘야겠다.

이번 과제를 통해 JavaScript(이하 JS)를 이용한 웹페이지 제어를 반복연습 할 수 있었다. 바닐라 JS만을 이용한 웹페이지 제작은 몇번 하지 않고 리액트로 넘어간 터라 리액트의 편안함에 너무 익숙해져 있었다. 코드량이 많고 시간이 좀 걸리더라도 JS를 이용한 웹페이지를 더 만들어서 기초를 잊지 말아야겠다.

🌱과제 내용

구현 페이지

첫 화면

초 단위로 시계가 작동 : new Date().toLocaleDateString()
이름을 입력할 수 있는 입력 폼(form)이 나타남

이름 입력 후 화면

상황에 따라 .hidden {display: none;} 이라는 class를 부여하여, 이름 입력 후 입력 폼은 사라짐

새로고침 시 (이름 유지, 랜덤 배경화면)

localStorage에 입력받은 이름을 저장해 두어 새로고침 시 이름이 존재한다면 기존 화면 유지
이름이 존재하지 않는다면 (null) 입력 폼이 나타남
랜덤 배경화면 : Math.random()

코드 보기

실시간 시계

// time.js
const date = document.querySelector("h3#date");
const clock = document.querySelector("h2#clock");

function getDate() {
  date.innerText = new Date().toLocaleDateString();
}
function getClock() {
  clock.innerText = new Date().toLocaleTimeString();
}

getDate();
getClock();
setInterval(getClock, 1000);

랜덤 배경 이미지

// background.js
const images = [...Array(10)].map((item, index) => `${index + 1}.jpg`);
const currentImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");

bgImage.src = `./images/${currentImage}`;
document.body.appendChild(bgImage);

이름 입력 / 인사

// greeting.js
const loginForm = document.querySelector("form#login__form");
const loginInput = loginForm.querySelector("input");
const showUsername = document.querySelector("h1#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function getUsername(e) {
  e.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const newUsername = loginInput.value;
  localStorage.setItem(USERNAME_KEY, newUsername);
  paintGreetings(newUsername);
}

function paintGreetings(username) {
  showUsername.innerText = `안녕하세요, ${username}님!`;
  showUsername.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
  // 저장된 이름 없음 => 새 이름 받기
  loginForm.classList.remove(HIDDEN_CLASSNAME); //로그인 폼 나타내기
  loginForm.addEventListener("submit", getUsername); // 폼 제출하기 (이름받는과정시작)
} else {
  // 저장된 이름 있음 =>저장된 이름 가져오기
  paintGreetings(savedUsername);
}