[Nomad Coder] 바닐라 JS로 크롬 앱 만들기 - 파트 1

목차  

  1. Toggle

  2. 시계 

  3. 유저 이름 입력  

  4. 할 일 리스트 

  5. 그림 백그라운드 

  6. 현재 날씨 출력 

 

 

 

 

1. Toggle

 

  만약 문자를 클릭하면 색이 바뀌고 다시 클릭하면 원래 색으로 돌아가도록 하고 싶다면 어떻게 해야할까? 

const CLICKED_CLASS = "clicked"
function handleClick1(){ 
  // contains(값) : 배열 혹은 객체내에 값의 존재 여부를 확인 
  const hasClass = title.classList.contains(CLICKED_CLASS)
  if (hasClass){  // hasClass가 참이면, 즉 CLICKED_CLASS가 있을 경우
    title.classList.remove(CLICKED_CLASS) // CLICKED_CLASS을 삭제
  } else { 
    title.classList.add(CLICKED_CLASS); // CLICKED_CLASS을 생성
  }
}

 위 처럼 코딩한다면 CSS에 .clicked 와 H1 의 색상을 다르게 설정해주는 것으로 원하는 기능을 구현할 수 있다. 색상을 변경하는 것 외에도 ON/OFF의 기능을 구현하는 것을 쉽게할 수 있는 방법이다. 

BUT. 위의 방법이 너무 번잡하기 때문에 간단한 기능인 toggle을 사용하면 된다.

 

const CLICKED_CLASS = "clicked"
function handleClick(){
  // toggle : 위의 function이 해주는 일을 자동으로 해준다. 
  const hasClass = title.classList.toggle(CLICKED_CLASS);
}

 

 

 

 

2. 시계 파트

 

현재 시간대로 시간을 출력해주는 기능을 가졌다. 생각보다 어렵지 않았다. 

const clockContainer = document.querySelector(".js-clock"), // class name이 'js-clock'인 요소를 반환 
clockTitle = clockContainer.querySelector("h1");  // 그 중에 h1 태그를 찾아서 반환

function getTime(){
  const date = new Date(); // 현재 날짜와 시간의 정보가 담긴 Date 객체를 생성
  const hours = date.getHours(); // Date 객체 중 '시'를 반환하여 저장
  const minutes = date.getMinutes(); // Date 객체 중 '분'을 반환하여 저장
  const seconds = date.getSeconds(); // Date 객체 중 '초'를 반환하여 저장
  clockTitle.innerHTML = `${
    hours < 10 ? `0${hours}` : hours}:${
    minutes < 10 ? `0${minutes}` : minutes}:${
    seconds < 10 ? `0${seconds}` : seconds}`;
} // 삼항연산자(조건문 ? True의 수행문 : False의 수행문)와 템플릿 문자열을 조합

function init(){
  getTime(); // 실행 시 바로 현재시간이 표시된다. 없으면 시간이 설정되는데 시간이 걸림 
  setInterval(getTime, 1000); // 1초 마다 getTime을 실행
}
init();

 

결과

시계1

일반 시계처럼 시간의 흐름에 따라 시간을 나타내준다. 

 

시계2

 

 

 

 

3. 유저 이름 입력 

 

 이번에는 유저 이름을 입력하고 입력한 이름을 출력해주고 새로고침을 해도 이름을 기억하도록 하는 기능입니다.

 

const form = document.querySelector(".js-form"),
  input = form.querySelector("input"),
  greeting = document.querySelector(".js-greetings");

const USER_LS = "currentuser",
SHOWING_CN = "showing";

// LocalStorage 에 데이터를 저장한다. 
function saveName(text){
  localStorage.setItem("USER_LS", text);
}
// 엔터를 입력받았을 때, 반응하는 이벤트 
function handleSubmit(event){
  event.preventDefault(); // 이벤트의 기본 동작을 중단한다. 
  const currentValue = input.value; // input(html)의 value 값을 가저올 수 있다. 
  paintGreeting(currentValue); // 입력받은 값을 화면에 출력한다. 
  saveName(currentValue); // 입력받은 값을 LocalStorage가 기억하도록 한다.
}
// 이름을 입력할 BOX를 출력한다. 
function askForName(){
  form.classList.add(SHOWING_CN); // 이름을 입력할 box를 보이게한다. 
  form.addEventListener("submit", handleSubmit); // 엔터 시 이벤트 발생 
}
// 이름을 화면에 출력한다. 
function paintGreeting(text){
  form.classList.remove(SHOWING_CN); // 이름을 입력할 box를 없앤다.
  greeting.classList.add(SHOWING_CN); // 이름을 출력하는 태그를 보이게한다. 
  greeting.innerText = `Hello ${text}`;
}
function loadName(){
  const currentUser = localStorage.getItem(USER_LS); // LocalStorage에서 USER_LS가 있는지 확인
  if (currentUser === null){ // USER_LS가 없다면 
    askForName(); // 이름을 입력받는다 
  } else{
    paintGreeting(currentUser); // 화면에 이름을 출력
  }
}

 

참고 

  - localStorage.getItem(키) : 로컬 스토리지에서 해당하는 값을 가져온다.  
  - localStorage.setItem(키,값) : 로컬 스토리지에 해당하는 키와 값을 저장한다. 

 

 

나머지 4, 5, 6은 다음 파트에...