2020-07-19 공부내용

오늘도 역시  오후에 살금살금 집에서 나와 항상오는 스터디카페로 갔다.

전에 자바스크립트를 이용해 만들었던  ToDoList를 혼자 힘으로만 만들어 온전히 내 것을 만들기 위해 공부를 시작했다

가장 먼저 만들었던 프로젝트 코드를 눈으로 한번 보고 만들기 시작했는데 처음에 만들 떄 보고 만들었던 것과는 다르게 뭘 어떻게 해야 할 지 머리 속으로 감이 도저히 잡히지 않아 코드를 계속 보면서 이해를 조금 하고 코드를 치고 하는 식으로 했다 

const clockTitle = document.querySelector(".clock__title");

function getTime() {
  const date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours} ${
    minutes < 10 ? `0${minutes}` : minutes
  } : ${seconds < 10 ? `0${seconds}` : seconds}`;
}
function init() {
  getTime();
  setInterval(getTime, 1000);
}
init();

 

가장 먼저 현재 시간을 화면에 출력하는 getTime.js를 먼저 만들었다 

 

HTML에 있는 h1 엘리먼트를 변수에 담고

 

시간를 구하는 객체를 생성 한 후 

객체에서 hours, minutes, seconds에  변수에 시, 분, 초를 저장한 후 

삼항 연산자를 이용해 10전에 1자리 숫자가 나와 2자리 숫자 즉 앞에 10 이전이면 0이 나올 수 있도록 했다.

 

그런 뒤 init함수를 안의 setInterval함수를 이용해 1초마다 함수가 실행될 수 있도록 해 화면에 1초마다 시간이 바뀌게 구현을 했다 

 

const form = document.querySelector(".form__js"), // form 가져오기
  input = form.querySelector("input"), //input 가져오기
  greeting = document.querySelector(".greeting__js"); //h2 가져오기

const user_localStorage = "currentUser"; // 유저
const showing_className = "showing"; //showing 클래스 이름

function saveName(text) {
  // handleSubmit에소 보낸 정보를 인자로 받는다
  localStorage.setItem(user_localStorage, text); // 그 인자를 localStorage에 저장한다
}
function hadleSubmit(event) {
  // 이벤트를 인자로 받는다
  event.preventDefault(); // 이벤트 방지
  const currentValue = input.value; // forn안에 입렫된 값을 저장.
  paintGreeting(currentUser); // 그 값을 paintGreetion 함수에 보내준다
  saveName(currentValue); // from에 입력된 값을 saveName에 인자로 보낸다
}

function askForName() {
  // 유저가 업을 떄 이 함수가 실행됨
  form.classList.add(showing_className); // form에 showing 클래스를 줘서 form이 보이게 한다
  form.addEventListener("submit", hadleSubmit); // 그 form에 이름을 적으면 이벤트 발생하고 handle함수를 실행
}

function paintGreeting(text) {
  //유저를 인자로 받아온다.
  form.classList.remove(showing_className); // form에 showing 클래스르 지운다
  greeting.classList.add(showing_className); // greetion에 showing 클래스를 생성한다

  const date = new Date(); // 시간 객체 생성
  const hours = date.getHours(); // 시간안에 현재 시간을 저장한다.

  if (hours >= 6 && hours < 12) {
    // 시간이 6시에서 12사이면 goodMoning
    greeting.innerText = `Good Moning ${text}`;
  } else if (hours >= 12 && hours < 18) {
    //시간이 12시에서 6시 사이면 Good Afternoon
    greeting.innerText = `Good Afternoon ${text}`;
  } else if (hours >= 18 && hours < 24) {
    // 시간이 6부터 12시면 Good Evening
    greeting.innerText = `Good evening ${text}`;
  } else {
    // 셋 다 아니면 Good day
    greeting.innerText = `Good Day ${text}`;
  }
}

function loadName() {
  // 메인함수 시작
  const currentUser = localStorage.getItem(user_localStorage); // 유저를 가져온다

  if (currentUser == null) {
    // 유저가 있지 않다면 아래 함수를 실행
    askForName();
  } else {
    //유저가 존재한다면 아래 함수를 실행
    paintGreeting(currentUser);
  }
}

function init() {
  // 함수 실행
  loadName(); // init함수가 실행되면 loadName함수가 시작된다
}
init(); // init 함수 시작

그 후 

로컬스토리지(LocalStorage)를 이용하여 user__loclaStorage에 key값을 입력하고  input창에 이름을 입력하여 입력된 이름을 value값에 저장한 뒤 화면에 그 값을 영구적을 출력하는 함수이다 

또 중간에 시간을 불러오는 date를 이용해 시간마다 다르게 인사를 하는 조건을 추가해줬다 

 

결과 화면