13. Momentum 만들기 4 - 사용자 이름 저장하기2

2단계 사용자 이름 저장하기 마무리 및 버그 수정

1. 사용자 이름이 저장되지 않은 경우 입력폼 노출
2. 이름 입력후 엔터버튼을 선택할 경우 페이지가 새로고침이 되는것을 방지
3. 사용자 이름 저장 및 노출
4. 버그 수정

키워드1 event.preventDefault

• 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소.

전체코드

greeting.js

'use strict';

const USER = 'currentUser';
const SHOW = 'showing';
const form = document.querySelector('.js-form');
const input = form.querySelector('input');
const greeting = document.querySelector('.js-greetings');

function saveName(userName) {
    localStorage.setItem(USER, userName);
}

function handleSubmit(event) {
    // 이름을 넣고 enter를 누르면 페이지가 새로고침이 되기때문에 이벤트 중지
    event.preventDefault();
    const currentValue = input.value;

    displayGreeting(currentValue);
    //사용자 이름을 로컬스토리지에 저장
    saveName(currentValue);
}
function askForName() {
    form.classList.add(SHOW);
    form.addEventListener('submit', handleSubmit);
}

function displayGreeting(user) {
    form.classList.remove(SHOW);
    greeting.classList.add(SHOW);
    greeting.innerHTML = `Hello ${user}`;
}

function loadName() {
    const currentUser = localStorage.getItem(USER);
    if (currentUser === null) {
        //이름 물어보는 폼 노출
        askForName();
    } else {
        //displayGreeting(USER);
        displayGreeting(currentUser);
    }
}

function init() {
    loadName();
}

init();

index.css

body {
  background-color: #ecf0f1;
}

.btn {
  cursor: pointer;
}
body {
  color: #34495e;
}

.clicked {
  color: #7f8c8d;
}

.form,
.greetings {
  display: none;
}

.showing {
  display: block;
}