쫑가 과정

목표 해야 할 일을 입력해서 화면에 띄운다. 그리고 삭제 버튼을 눌러서 없앨 수 있다. 작동원리 파악 html에 ul태그를 만들어 놓고 submit 할 때마다 li태그가 생성. li안에 삭제 button 태그와 입력값이 들어갈 span태그를 만들어서 넣자. span에 input에 입력값을 넣고 span을 화면에 띄우고 localStorage에 저장. 삭제 버튼을 누르면 해당 li태그 포함하는 화면과 저장 값 둘 다 지워진다. 저장 값이 있다면 꺼내서 화면에 띄움. ※ 여러 리스트를 추가한다는 것을 잊지 말기. 생성하고 지울 수 있어야 한다. 1. 필요한 태그 만들기. 오늘의 할 일 const toDoForm = document.querySelector(".todo_form"); const toDoInpu..

목표 input 입력값을 화면에 띄워보자. 작동원리 파악 form, input 만들기. submit한 후에 form이 사라진다. 입력값이 저장되고 꺼내 쓸 수 있다. 1. submit 후 form 숨기기 form 숨기기 See the Pen by jongha (@gajong) on CodePen. submit하면 form은 사라졌지만 사용자 이름이 console에는 기록됐다. h1태그 숨기기 현재 h1은 공백으로 나와있는 것이라 처음에 hidden으로 숨겨놓아야 한다. h1 class를 hidden으로 지정하고 id를 greeting으로 한다. See the Pen by jongha (@gajong) on CodePen. h1을 JavaScript에서 사용할 수 있게 변수로 만들어준다. submit이 작..

목표 element를 click 했을 때 색상이 파란색이 되고 파란 element를 click하면 토마토색이 되게 한다. 작동원리 파악 todo -> click = blue blue todo -> click = tomato click event를 사용. 색상에 따라 만들 수 있는 조건을 확인. 어떤 식으로 작성해야 하는지 보자. See the Pen by jongha (@gajong) on CodePen. console을 보면 click 할 때마다 todo.style.color가 blue로 나오는 것을 확인할 수 있다. 그럼 todo.style.color가 blue이면 tomato가 되게 추가해보자. (작동원리 2번) condition에 따른 작동(if, else) See the Pen by jongha..

목표 화면에 작동하는 시계를 표시한다. 작동원리 파악 시간을 화면에 가져온다. 매 초마다 시간을 가져와 업데이트되게 한다. 시간 가져오기 Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org const date = new Date(); date.getHours(); // 시를 반환 date.getMinutes(); // 분을 반환 date.getSeconds(); // 초를 반환. 이 외에도 사용할 수 있는 여러가지 date method가 있다. 매초 시간가져오기...