디지털 노마드의 꿈

강의에서 들은 내용을 응용해서 사이트를 만들어 봤다. 모르거나 강의에 나오지 않는 부분은 구글링을 통해서 보완했다. 완성작 디자인을 보기 좋게하기 위해서 각각 스크립트들의 위치를 계속 조정하면서 만들었다. Input Box는 보기 안좋아서 hidden으로 숨겼다. 폰트는 여러개를 사용해봤다. 인사말은 느낌있게 필기체를 사용해봤다. 할 일 리스트도 동일 "X" 표시가 맘에 안들어서 빼고 싶었는데.... 귀찮아서 일단은 놔두기로 했다. 나중에 바꿀 예정. 그리고 리스트의 숫자가 많아지면 보기 지저분해서 스크롤을 만들어줬다. 그 외에 랜덤 배경화면이라서 새로고침하면 총 4개의 배경화면 중에 1개가 랜덤으로 나온다. 근데 나오는 것만 계속 나오는거 같은데...

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"..