천진난만 코딩 스토리

강의를 보며 만든 작품에 css작업과 추가로 더 만들고 싶었던 기능도 구현함. 글자가 있는 부분에는 배경색을 넣었었다가 별론 것 같아서 글자에 그림자를 주는 방법을 택했더니 맘에 들게 나왔음! 체크박스를 구현하는 과정에서 체크가 되어있을 때 다시 누르면 체크가 사라지게 하도록 하고싶었지만, 쉽지않았고... 순수 js보다 React로 하는 것이 더 수월하다는 조언을 들어 다음에 하기로 결정! (쉬어가며 했더니 오래 걸렸다...) https://github.com/wisdom1104/js-for-beginners GitHub - wisdom1104/js-for-beginners Contribute to wisdom1104/js-for-beginners development by creating an acco..

- HTML - 날씨를 나타내 줄 공간을 추가함. - JS - const weather = document.querySelector("#weather span:first-child"); 를 하여 weather라는 변수에 html의 weather span:first-child를 찾아와 저장함. const city = document.querySelector("#weather span:last-child"); 를 하여 city라는 변수에 html의 weather span:last-child를 찾아와 저장함. const API_KEY = "9e3ffc367decd6a5b19153f46b4aa8c6"; 를 하여 https://openweathermap.org/ 이 사이트에 회원가입 후 메일인증하여 API를 받아..

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