생각하다 생각하다

1. 투두리스트 값 저장하기 in localStorage 1. 투두리스트 값 저장하기 JSON.stringify 화면에 투두를 입력해도 새로고침하면 사라지기 때문에 로컬 스토리지에 저장할 필요가 있다. const toDos = []; //투두리스트 저장할 배열 // 로컬스토리지에 저장하는 함수 function saveToDos() { localStorage.setItem("todos", toDos); } 그리고 handleToDoSubmit() 함수에 seveToDos() 함수를 넣어준다. function handleToDOSubmit(event) { event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; toDos.p..

1. html에 투두리스트 뼈대 생성하기 1. html 파일에 투두리스트 틀 만들기 (input부분, 리스트 부분) index.html 1. 새로운 할 일을 입력할 Form태그를 생성하고 그 안에 input 태그를 생성한다. 2. 아래에 투두리스트를 보이게 하도록 ul 태그를 생성한다. 3. ul 안의 li 태그는 자바스크립트로 동적으로 생성할 것이다. 2. 자바스크립트에서 투두리스트 요소 가져오기 todo.js const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-l..

1. 랜덤 명언 구현하기 1. 명언 배열 생성하기 (js 파일은 따로) quotes.js const quotes = [ { quote: "Well done is better than well said.", author: "Benjamin Franklin", }, { quote: "If you would thoroughly know anything, teach it to others.", author: "Tryon Edwards", }, { quote: "My personal hobbies are reading, listening to music, and silence.", author: "Edith Sitwell", }, { quote: "Reading is sometimes an ingenious de..

1. 매번 반복하기 setInterval() 부제: 매 초, 2초마다, 4초마다 등 원하는 간격으로 실행시키기 1) 매번 반복하기 - setInterval() setInterval(함수, 시간간격) //시간은 ms 기준 (million seconds) index.html 00:00 h1태그 위에 h2 태그 추가하기. id는 clock. 디폴트 세팅은 00시 00분. clock.js const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); // -> 5초마다 sayHello 함수가 실행됨 2) 타이머 설정하기 - setTimeout() set..

tip. element 가져오기 - document가 아닌 다른 element 내에서도 가져올 수 있다. 아래 코드 참고하기 index.html Log In app.js const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); 1. Login Form 유효성 검사 1. JavaScript로 유효성 검사하기 (권장하지 않음) (1) 빈칸 검사 function onLoginBtnClick() { const value = loginInput.value; if (value === "") { alert("Please write your name"); } } loginButto..