기록하는 개발자

- 위 스크린샷의 왼쪽 화면에서 체크리스트의 항목을 삭제하면 오른쪽 화면의 localStorage에서도 삭제된다. - 새로고침 실행 시 내가 삭제를 원했던 항목을 아래 스크린샷처럼 오른쪽 화면 및 localStorage 에서 모두 보이지 않도록 조치를 취한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const TODOS_KEY = "todos"; fu..

Checklist Load 구현 - list를 입력 받아 localStorage에 저장한다. - 새로고침 후에도 localStorage로부터 이전에 저장한 value를 load해서 list를 유지할 수 있다. - 이전 정보 load 후 추가로 list를 입력 받을 때 덮어쓰기 되지 않고 기존 list에 추가되도록 한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const ..

아래와 같이 refresh 할 때마다 배경 사진이 바뀌는 기능을 추가해보자. Log in 00:00:00 const images=["img1.jpg","img2.jpg","img3.jpg"]; const chosenImage = images[Math.floor(Math.random()*images.length)]; const bgImage = document.createElement("img"); bgImage.src = `img/${chosenImage}`; document.body.appendChild(bgImage); 1. random image 저장 - 필요한 이미지를 프로젝트 폴더 내 img 폴더를 생성해 한 데 모아둔다. - string type..

10개의 명언 중 랜덤하게 하나를 골라 명언과 출처를 출력하는 js를 적용해보자. Log in 00:00:00 const quotes = [ { quote : "Laughter is timeless, Imagination has no age. And dreams are forever.", author : "Walt Disney", }, { quote : "The past can hurt, but the way I see it, you can either run from it or learn from it.", author : "Lion King", }, { quote : "You must not let anyone define your limits because ..

만들고자 하는 시계의 모양이다. 여기서 필요한 것은 기본적으로 제공되는 Date 객체의 hours, minuteds, seconds 함수는 시, 분, 초가 10보다 작은 경우 01, 02가 아닌 1, 2 와 같이 한 자리로 표시된다는 것이다. 따라서 아래 스크린샷처럼 00:00:00 형식으로 표시되도록 조치를 취해주어야하는 것이 포인트이다. Log in 00:00:00 const clock = document.querySelector("h2#clock"); function getClock(){ //매초 시분초를 갱신 const date= new Date(); const hours = String(date.getHours()).padStart(2,"0"); const..

1. 첫 화면 - username 을 입력하는 form 을 보여준다. - 이름을 입력하기 전에는 localStorage가 비어있다. 2. 이름 입력 후 login 버튼 클릭 - 'Hello 이름 :)!' 이 출력된다. - form 태그는 출력되지 않는다. - local Storage 에 username이 저장된다. - 새로고침을 해도 username이 local Storage에 저장되어 인사 멘트가 동일하게 출력된다. HTML Log in CSS body{ background-color: lightslategrey; text-align: center; } .hidden{ display : none; } body 태그 내 form, h1태그의 class 이름을 hidden으로 지정하고 css에서 hidde..

div.fruit h1[id=first] : class=fruit인 div중 h1의 id가 first인 쿼리 const h1=document.querySelector("div.fruit h1[id=first]"); handleTitleClick1, 2는 아래와 같은 역할을 동일하게 수행하는 코드이다. h1의 classList에 clicked class가 이미 있는지 확인 → 만약 있다면 clicked를 제거 → 없다면 clicked를 추가 toggle 함수는 handleTitleClick2 함수 내부의 코드 4줄과 동일한 역할을 한다. function handleTitleClick1(){ const clickedClass = "active"; if(h1.classList.contains(clickedCl..

Peach🍑 GreenApple🍏 WaterMelon🍉 ☁ 🌞 ☃ ☔ body{ background-color: lightblue; text-align: center; }​ // document : 현재 js 파일과 연결된 html 파일 // document에 first 라는 id를 가진 element를 가져온다. let firstElement=document.getElementById("first"); console.log(firstElement); // document에 second 라는 id를 가진 element의 innerText를 가져온다. let SecondElement=document.getElementById("second").innerText; console.log(SecondElemen..