vanilla JS #2

CODING/Javascript

by 피그말리온(PYGM) 2020. 6. 9. 00:14

<!DOCTYPE html>

<html>

  <head>

    <title>something</title>

    <link rel="stylesheet" href="index.css" />

  </head>

  <body>

    <div class="js-clock">

      <h1 class="js-title">00:00</h1>

    </div>

    <form class="js-form form">

      <input type="text" placeholder="what is your name?" />

    </form>

    <h4 class="js-greetings greetings"></h4>

    <script src="clock.js"></script>

    <script src="gretting.js"></script>

  </body>

</html>

body {

  background-color: #ecf0f1;

}



h1 {

  color: #34495e;

}



.clicked {

  color: #7f8c8d;

}



.form,

.greetings {

  display: none;

}



.showing {

  display: block;

}

const form = document.querySelector(".js-form"),

  input = form.querySelector("input"),

  greeting = document.querySelector(".js-greetings");



const USER_LS = "currentUser",

  SHOWING_CN = "showing";



function saveName(text) {

  localStorage.setItem(USER_LS, text);

}



function handleSubmit(event) {

  event.preventDefault();

  const currentValue = input.value;

  paintGreeting(currentValue);

  saveName(currentValue);

}



function askForName() {

  form.classList.add(SHOWING_CN);

  form.addEventListener("submit", handleSubmit);

}



function paintGreeting(text) {

  form.classList.remove(SHOWING_CN);

  greeting.classList.add(SHOWING_CN);

  greeting.innerText = `Hello ${text}`;

}



function loadName() {

  const currentUser = localStorage.getItem(USER_LS);

  if (currentUser === null) {

    askForName();

    // she is not

  } else {

    //she is

    paintGreeting(currentUser);

  }

}



function init() {

  loadName();

}

init();

저작자표시 비영리 변경금지

'CODING > Javascript' 카테고리의 다른 글

예제로 보는 자바스크립트 기본 문법 pt.3 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.2 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.1 (0)	2022.05.28
vanilla JS #3 (0)	2020.06.09
vanilla JS (0)	2020.06.08