첫! 바닐라JS_web페이지 제작

노마드 강의 한 달 동안 들은 후, 혼자 만들어보기 프로젝트 (2주)

• 강의만 따라해서는... ‘나의 것’이 되지 않는 것 같아 강의 복기 겸 혼자 만들어보기!

구현한 기능

주요 구현 부분 (기록하고 싶은 부분 정리~~)

greeting.js

• 사용자가 userName을 submit했을 때 input form숨기고 printGreeting

function handleLoginInput(event){
    event.preventDefault();
    loginInput.type="hidden";
    const userName = loginInput.value;
    printGreeting(userName);
}

• F5 해도 userName날아가지 않게 → localStorage이용

localStorage.setItem("userName", userName);
//중간생략//
const userName = localStorage.getItem("userName");

• local Storage에 값이 있으면 환영 인사 출력, else input form입력 기다림

if(localStorage.getItem("userName")==null){
	---}else{---}

clock.js

• 1s 마다 function tiking 불러옴

setInterval(tiking,1000);

todo.js

• paintTodo(newTodo): 파라미터의 newTodo를 paint (= html “li” 생성)

• saveTodos: list를 localStorage에 저장하기 위해 글자 그대로 스트링으로 만듦

localStorage.setItem(TODO_KEY, JSON.stringify(todoList));

• 처음에 저장된 거 가져올 때: 기존에 localStorage에 있는 todo string을 list로 분리해서 가져옴

const parsedTodos = JSON.parse(savedTodos);

• delete(event): Event.target : 이벤트가 발생한 대상 객체를 가리킴.

const li = event.target.parentElement;
//누른 delete btn 의 parent element => 해당 todo의 list!

• delete(event): 해당 요소를 리스트(todoList)에서도 삭제해야 함
• 조건에 해당하는 요소만 남기는 filter, 문자열을 정수로 반환하는 parseInt 사용

todoList = todoList.filter((todo) => todo.id !== parseInt(li.id));

강의의 내용만 구현하면.. 기본적인 기능’만’ 구현된 상태

페이지 꾸미기 (css)

• background 설정, 위치 조정 등 css 추가