ToDoList

index.html
기본적인 timer markup
(추가) greeting 부분
(추가) greeting.js
clock.js
현재 시간을 출력할 수 있도록 작성한 js
시 분 초가 1자리 수인 경우 앞에 0 추가해주기
1초 지날 때마다 시간 실시간으로 얻어오기

(추가)
greeting.js
이름을 입력하지 않으면(localStorage에 없으면) 이름 입력 받는 input 출력
이름을 입력하면 해당 이름 localStorage 저장

(추가)
index.css
css 각자 알아서 보기

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <title>Timer</title>
</head>
<body>
    <div class="wrap">
        <div class="js-clock">
            <h1 class="js-clock-text">00:00</h1>
        </div>

        <form action="" class="js-form form">
            <input type="text" placeholder="what's your name">
        </form>
        <h4 class="js-greetings greetings"></h4>
    </div>
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
</body>
</html>

clock.js

// js-clock을 가진 요소에 접근
// js-clock 내에 있는 h1 요소에 접근
const clockContainer = document.querySelector(".js-clock");
const clockText = clockContainer.querySelector("h1");

// 현재 시간을 얻어오는 함수
function getTime() {
    const date = new Date();

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockText.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init() {
    getTime();
    setInterval(getTime, 1000);
}

init();

// js-clock을 가진 요소에 접근
// js-clock 내에 있는 h1 요소에 접근
const clockContainer = document.querySelector(".js-clock");
const clockText = clockContainer.querySelector("h1");

function getTime() {
    // Date 객체 생성
    const date = new Date();

    // 시 분 초 받아 오기
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    // 숫자가 1자리 수인 경우 앞에 0 붙여주기
    clockText.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init() {
    getTime();
    // 1000 밀리세컨드(1초) 당 1번 getTime 실행시키기
    setInterval(getTime, 1000);
}

init();

greeting.js

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

const USER_LS = "currentUser";
const SHOWING_CN = "showing";

// 사용자 이름을 localStorage에 저장한다.
function saveName(name) {
    localStorage.setItem(USER_LS, name);
}

function handleSubmit() {
    // event 기본 동작을 막는다.
    event.preventDefault();

    const currentValue = input.value;

    paintGreeting(currentValue);
    saveName(currentValue);
}

// 사용자에게 이름을 입력 받는 함수
function askName() {
    // form에 showing class를 추가시켜 보이도록 한다.
    form.classList.add(SHOWING_CN);

    // form은 submit을 하면 default로 무언가를 다른 곳으로 보내려고 한다.
    // 이때 handleSubmit을 사용한다. 이것을 막기 위해 사용하는 함수.
    form.addEventListener("submit", handleSubmit);
}

// 사용자 이름 출력 함수
function paintGreeting(name) {
    // 기존에 form에 추가해주었던 .showing 삭제
    // greeting에 .showing 추가
    form.classList.remove(SHOWING_CN);
    greeting.classList.add(SHOWING_CN);
    greeting.innerHTML = `Hello ${name}`;
}

function loadName() {
    // localStorage에서 USER_LS의 값을 가져온다.
    // 해당 값이 없으면 이름을 입력받고 있으면 출력한다.
    const currentUser = localStorage.getItem(USER_LS);

    if(currentUser === null) {
        askName();
    }
    else {
        paintGreeting(currentUser);
    }
}

function init() {
    loadName();
}

init();

index.css

.js-greetings,
.js-form {
    display: none;
}

.showing {
    display: block;
}

결과

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