천진난만 코딩 스토리

- HTML - 새로 만든 js 파일을 작성해줌. - JS - function onGeoOk(position) { 를 하여 자바스크립트가 position으로 user의 위치를 전달해주는 onGeoOk란 함수를 만듬. (position은 object 이고 위도와 경도 값이 들어있음) const lat = position.coords.latitude; 를 하여 lat이란 변수에 latitude(위도)값을 저장하고, const lng = position.coords.longitude; 를 하여 ing이란 변수에 longitude(경도)값을 저장함. console.log("You live in", lat, lng); 를 하여 console에 You live in와 유저의 위도 경도를 보여줌. } function..

- HTML - 변경사항 없음. - JS - toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); 를 하여 클릭한 li.id와 id가 다른 todo는 남기고 같은 id를 가진 todo는 지움. toDo.id는 number이고 li.id는 string이기 때문에 서로 일치하지 않아 오류가 생김. parseInt를 하여 number로 만들어줌. (filter는 주어진 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 만듬) filter를 하여 배열 안의 아이템을 한번씩 거치는데 이 때 toDo는 배열 안의 아이템을 말함. [a, b, c]의 배열이 있으면 [a] [b] [c] 각 각 조건에 부합하는지 확인하게 되는데 이 때 [a] [b] [c] 를..

- HTML - 변경사항 없음. - JS - console.log(li.id); 를 하여 X버튼을 누르는 li의 id를 console에 기록되게 함. (이 때 id는 Date.now()인 id임) li.id = newTodo.id; 를 하여 li.id는 newTodo.id인 작성한 ToDo의 id라고 저장함. span.innerText = newTodo.text; 를 하여 span의 innerText에 newTodo의 text를 저장하게 함. (실제로 저장되는 건 newTodoObj.text임) const newTodoObj = { 를 하여 newTodoObj를 만들고 그 안에 Object를 만듬. text: newTodo, 를 하여 text에는 newTodo를 저장하고, id: Date.now(), 를..

- HTML - 변경사항 없음. - JS - (분홍색 박스) 변수의 이름을 헷갈리지 않게 바꿔줌. (연두색 박스) const 를 업데이트가 가능한 변수인 let 으로 변경해줌. 그래야 새로고침해도 localStorage에 저장된 데이터를 불러와 업데이트 할 수 있음. const savedToDos = localStorage.getItem(TODOS_KEY); 를 하여 savedToDos 라는 변수에 localStorage의 TODOS_KEY인 todos를 저장함. if (savedToDos !== null) { 를 하여 만약 savedToDos가 null이 아니라면 (비어있지 않다면) const parsedToDos = JSON.parse(savedToDos); 를 하여 parsedToDos 라는 변수에..

- HTML - 변경사항 없음 - JS - const toDos = []; 를 하여 toDos라는 변수를 배열로 저장함. function saveToDos() { 를 하여 saveToDos()라는 함수를 만듬. localStorage.setItem("todos", JSON.stringify(toDos)); 를 하여 localStorage에 todos라는 Key와 toDos를 배열로 받아 Value에 저장함. JSON.stringify(toDos)를 하여 toDos를 string으로 변경해줌. 변경하지 않으면 string 형태로 배열되어 저장되는 것이 아니라 단순 text 형태로 저장되기에 중복되어 저장되지 않음. } toDos.push(newTodo); 를 하여 toDos인 배열에 에 newTodo인 작..

- HTML - 변경사항 없음 - JS - function deleteToDo(event) { 를 하여 deleteToDo(event) 라는 함수를 만듬. const li = event.target.parentElement; 를 하여 li라는 변수에 어떤 버튼이 클릭되었는지 부모요소를 저장함. ex) hi라고 적힌 to do의 X버튼 클릭 시 button의 부모인 li인 hi를 저장함. li.remove(); 를 하여 버튼 클릭 시 li를 지움. } function paintToDo(newTodo) { 에 코드를 추가함. const button = document.createElement("button"); 를 하여 변수 button에 document.createElement("button") 를 하여 ..

- HTML - 시계의 위치를 위로 옮기고 To Do form을 만들어줌. form 안의 ul 안에 li로 작성되는 to do를 받을 것이지만 li은 js파일에서 만들 것임. 새로 만든 js 파일도 연결해둠. - JS- const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); 를 하여 변수 toDoForm 에는 todo-form인 form을 변수 toDoInput에는 todo-form의 input을 변수 toDoList에는 todo-list인 ul을 저장함...

- HYML - 만든 js파일을 입력함. - IMG - 원하는 사진을img 폴더에 넣어둠. 이때 사진 이름이 매우 중요함. - JS - const images = ["0.jpeg", "1.jpeg", "2.jpeg"]; 를 하여 images에 사진들을 배열하여 넣어줌. const chosenImage = images[Math.floor(Math.random() * images.length)]; 를 하여 chosenImage에 images를 랜덤으로 하나 나타내게 함. images[Math.floor(Math.random() * images.length)]를 하여 images의 배열을 Math.random() * images.length 를 하여 images.length 만큼 랜덤으로 하나 뽑게 하고 Ma..

- HTML - quote라는 박스안에 span 두개를 넣어줌. 이 span은 각 명언과 작가이름이 생길 자리임. 새로 만든 js파일도 작성해줌. - JS - const quotes = [ { quote: " ", author: " ", }, . . . { quote: " ", author: " ", }, ]; 를 하여 quotes에 명언들을 배열함. 원하는 만큼 만들면 됨. const quote = document.querySelector("#quote span:first-child"); 를 하여 quote에 html의 quote의 span:first-child를 넣어줌. const author = document.querySelector("#quote span:last-child"); 를 하여 aut..

- HTML - 변경사항X - JS - const hours = String(date.getHours()).padStart(2, "0"); 를 하여 hours라는 변하지 않는 변수에 date.getHours()를 하여 시간을 저장하는데 String(date.getHours()) 을 하여 number를 string으로 변경해주고 padStart(2, "0")를 하여 표시되는 시간이 2글자가 안된다면 앞에 0을 추가함. padStart 는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환함. padEnd 는 현재 문자열의 끝을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환함. padStart와 padEnd 모두 string에만 적용 가능함. 즉, nu..