첫! 바닐라JS_web페이지 제작
노마드 강의 한 달 동안 들은 후, 혼자 만들어보기 프로젝트 (2주)
- 강의만 따라해서는... ‘나의 것’이 되지 않는 것 같아 강의 복기 겸 혼자 만들어보기!
구현한 기능
greeting: userName 입력 받고 “환영인사 + userName” 보여주기
clock: 1초마다 바뀌는 시계 만들기
back-ground: 사진 리스트에서 랜덤 사진뽑고 배경화면으로 지정
todo: user로부터 입력 받고 저장
주요 구현 부분 (기록하고 싶은 부분 정리~~)
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");
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2F0d6dc370-5d58-4293-a2a1-238ed20e59d8%2FUntitled.png?table=block&id=a2a8ce0b-e024-4e28-8cde-70540c0088eb&cache=v2)
- 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));
강의의 내용만 구현하면.. 기본적인 기능’만’ 구현된 상태
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2F85b65040-013d-4d85-b2bc-221892d68f03%2FUntitled.png?table=block&id=d8f174ff-b457-45d2-841f-e096d6d76322&cache=v2)
페이지 꾸미기 (css)
- background 설정, 위치 조정 등 css 추가
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2F5e2a9079-774a-451f-a449-c353c30e2f6a%2FUntitled.png?table=block&id=8ab2b7be-b57a-4efa-8496-674321477638&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2Fdbe2f20b-e763-42de-81cf-eded81cf532e%2FUntitled.png?table=block&id=cd30a762-fe86-411e-b535-61904851cdae&cache=v2)