Momentum 프론트를 만들었는데 왜 까먹는가?

예전에 만들었는데 역시나.... 왜이리 쉽게 잊혀지는 걸까?

내 약점은 조금만 브라우저 동작에 대한 내용이 나오면 잊는다는 것이다.

브라우저에는 stroage가 있는데 입력값을 보관해준다. 해당 관련해서 코드를 짰는데 너무나 복잡하다.

일단 자주 잊는 부분을 기록해두고자한다.

 

const nameForm = document.querySelector("#nameForm")
const nameInput = document.querySelector("#nameinput")
const mainBox = document.querySelector("#mainBox")
const clock = document.querySelector("#clock")
const today = new Date();
const hour = String(today.getHours()).padStart(2,0);
const minute = String(today.getMinutes()).padStart(2,0);
const second = String(today.getSeconds()).padStart(2,0);
clock.innerText = `${hour}:${minute}:${second}`


// 3. 시간에 따라서 인사말 달리하기 


// 1. 먼저 이름 벨류 값을 받기
function hello() {
  event.preventDefault();
  const username = nameInput.value
  // 내가 못했던 것!
  localStorage.setItem("username", username)
  // 2. 기존 인풋을 없애고 이름을 화면에 표출
  nameForm.classList.add("hide")
  const nameBox = document.createElement("h2");
  mainBox.appendChild(nameBox);
  // 3번 세부 조건 설정
  if (hour >= 17 || hour < 4) {
   nameBox.innerText = `Good Evening, ${username}`;
  }else if (hour >= 4 && hour < 12) {
    nameBox.innerText = `Good Morning, ${username}`;
   } else {
    nameBox.innerText = `Good Afternooon, ${username}`;
   }
  }

// 4. 시계 만들기

function whatTime() {
  const clock = document.querySelector("#clock")
  const today = new Date();
  const hour = String(today.getHours()).padStart(2,0);
  const minute = String(today.getMinutes()).padStart(2,0);
  const second = String(today.getSeconds()).padStart(2,0);
  clock.innerText = `${hour}:${minute}:${second}`
}

setInterval(whatTime, 1000)

//  5. 내가 잘 못했던 부분 이름 기억하기 브라우저 기본 기능으로 local Storage
// localStorage.setItem!!!

const savedUsername = localStorage.getItem("username")

if (savedUsername === null) {
  nameForm.classList.remove("hide");
  nameForm.addEventListener("submit", hello);
} else {
  nameForm.classList.add("hide")
  const nameBox = document.createElement("h2");
  mainBox.appendChild(nameBox);
  // 3번 세부 조건 설정
  if (hour >= 17 || hour < 4) {
   nameBox.innerText = `Good Evening, ${savedUsername}`;
  }else if (hour >= 4 && hour < 12) {
    nameBox.innerText = `Good Morning, ${savedUsername}`;
   } else {
    nameBox.innerText = `Good Afternooon, ${savedUsername}`;
   }
}

localStorage.setItem, localStorage.getItem으로 저장의 개념을 좀 배워볼 수 있었다.