Javascript/Clone Website5 [Vanilla-JS] 5. Making a To Do List part One To-do 리스트를 빌드해볼거다. greetings했던것과 비슷하다. todo.js 생성 후 html에 추가해보자. 그리고 toDoList를 입력 할 Form을 만들고, 그 아래에는 입력한 내용을 리스트 형태로 출력하기 위해 ul태그를 생성할거다. 만약에 toDos가 null이면 아무것도 하지 않을거다. 왜냐하면 greeting form과 다르게 이 form은 항상 입력창을 활성화 할것이므로(showing) 여기도 submit 했을 때 문제점을 해결하기 위해 이벤트를 가져올 때 event.preventDefault를 넣어줄거다. 엔터를 누르면 입력칸에 입력 내용이 그대로 남아있는데, 다음 내용을 입력할수있게 엔터를 누르면 공백이 되도록 만들어 줄거다. 이제 ul태그안에 li 를 만들어보자. PaintTo.. 2020. 8. 6. [Vanilla-JS] 4. Saving the User Name localStorage.setItem() 으로 key와 value를 각각 추가할 수 있다. 저장된 값을 가져올 때는 localStorage.getItem()을 사용한다. 새로고침을 하면 화면에 입력한 User정보가 리셋되는걸 막기위해 localStorage에 정보가 저장되어 있으면, 그 값을 paintGreeting 함수를 통해서 화면에 출력해줄것이다. const form = document.querySelector(".js-form"), input = form.querySelector("input"), //form이 input의 부모이므로 . 붙이지 않고 가져옴 greeting = document.querySelector(".js-greeting"); const USER_LS = "currentUser.. 2020. 8. 6. [Vanilla-JS] 3. Making a JS Clock part const clockContainer = document.querySelector(".js-clock"), clockTitle = document.querySelector("h1"); function getTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; } .. 2020. 8. 2. [Vanilla-JS] 2. 텍스트를 클릭하면 색상이 변경 클릭을 했을 때 클래스명에 따라 색상이 변경되도록 만들겠다. 기본값 클래스에서 클릭 이벤트가 발생시 클래스명이 바뀌면서 색상도 바뀌는.. 그리고 cursor: pointer도 클래스를 설정해서 효과를 줄것인데, 문제는 classList에 저장될때 clicked 상태가 돼야 색상이 변경되는데, 아래처럼 btn clicked 가 되어 색상 변경이 안된다. (한 개의 클래스만 체크가능) 그래서 필요한게 contains라는 객체이다. contain은 value가 존재 하는지 체크한다. 안녕하세요! body{ background-color: #ecf0f1; margin: 0px; } h1{ text-align: center; color: tomato; transition: color .5s ease-in-out;.. 2020. 8. 2. 이전 1 2 다음
