디지털 노마드의 꿈

4. 할 일 리스트 할 일 리스트는 정리하는데 좀 어려웠다. 로컬 스토리지에 데이터 저장, 요소 삭제, 요소 추가, 화면에 출력, 이벤트 발생시 처리 등 신경쓸게 많았다. const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), // input 받은 데이터를 저장한다. toDoList = document.querySelector(".js-toDoList"); // 입력 받은 데이터 리스트를 저장한다. const TODOS_LS = "toDos"; let toDos = []; // 리스트를 지운다 function deleteToDo(event){ // event의 부모에 대한 정보를..

목차 1. Toggle 2. 시계 3. 유저 이름 입력 4. 할 일 리스트 5. 그림 백그라운드 6. 현재 날씨 출력 1. Toggle 만약 문자를 클릭하면 색이 바뀌고 다시 클릭하면 원래 색으로 돌아가도록 하고 싶다면 어떻게 해야할까? const CLICKED_CLASS = "clicked" function handleClick1(){ // contains(값) : 배열 혹은 객체내에 값의 존재 여부를 확인 const hasClass = title.classList.contains(CLICKED_CLASS) if (hasClass){ // hasClass가 참이면, 즉 CLICKED_CLASS가 있을 경우 title.classList.remove(CLICKED_CLASS) // CLICKED_CLASS..

노마드 코더에서 무료강의인 바닐라 JS로 크롬 앱 만들기! 해당 강의는 아래의 사이트에서 찾을 수 있다. https://nomadcoders.co/ 바닐라 JS란? - 간단하게 말하자면 그냥 순수한 자바스크립트이다. 즉, 라이브러리가 없는 자바스크립트이다. 들어가기 앞서 기본기 정리 알아두면 좋은 기본적인 정보들을 확인해보자. [변수의 종류] let(block-scoped) : 재할당 가능, 재선언 불가능 let name = "GilDong"; name = "Amuge"; // 재할당 가능 const(block-scoped) : 재할당 불가능, 재선언 불가능 const name = "GilDong"; var(function-scoped) : 재할당 가능, 재선언 가능 var name = "GilDong"..