![]()
ToDo 리스트 만들기 - 만들고 싶은 기능 1) 먼저 HTML에 입력 폼을 만들어준다. 2) Javascript 먼저 자바스크립트에서 쓰일 요소들을 변수로 만든다. // form, input, ul 태그를 변수로 가져오기 const toDoForm = document.querySelector("#todo-form"); const toDoInput = document.querySelector('#todo-form input'); const toDoList = document.querySelector('#todo-list'); 입력폼에 할일을 적고 엔터를 치면, input값을 저장하고, input칸을 비운다. function handleToDoSubmit(event) { event.preventDefaul..
더보기 appendChild, createElement - 만들고 싶은 기능 1) 먼저 배경화면으로 만들고 싶은 파일들을 저장하여, img파일에 넣어주었다. 2) Javascript 1. 먼저 이미지파일을 images라는 array에 담아주었다. // 이미지 파일명을 array에 담아준다. const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; 2. 랜덤화 하는 변수만들기 (=명언 랜덤과 같음) const todaysImage = images[Math.floor(Math.random() * images.length)]; 3. img 태그를 document에서 만든다. const bgimage = document.createEleme..
![]()
- 만들고 싶은 기능 1. array, object에 담아두기 먼저 js파일 안에 array에 quote와 author이라는 key값을 가진 object들을 담아 두었다. 명언은 총 10개이며, 네이버에서 쉽게 퍼올수있다! const quotes = [ { quote: "상식과 정직한 거래만큼 인간을 경탄케하는 것은 없다.", author: "랄프 왈도 에머슨", }, { quote: "결과보다 과정 이라는 말은 상업 항공의 등장으로 옛말이 되었다.", author: "헨리 J. 틸만", }, { quote: "많이 보고 많이 겪고 많이 공부하는 것은 배움의 세 기둥이다.", author: "벤자민 디즈라엘리", }, { quote: "한 방향으로 깊이 사랑하면 다른 모든 방향으로의 사랑도 깊어진다.",..
![]()
- 만들고 싶은 기능 : 사용자가 이름을 입력하면, 입력값을 저장한 후, 반기는 멘트를 띄우기 *단, 입력 후에 새로고침해도 반기는 멘트가 유지되어야한다. 1. HTML Log in 입력받는 폼태그와 입력 이후에 띄울 수 있는 greeting h1 태그가 있다. 2. CSS .hidden{ display: none; } 3. JavaScript const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector(#greeting); ////////////////////////////////..
![]()
원하는 결과 1. HTML - id값이 "clock"인 h1태그를 body안에 넣어준다. 00:00:00 2. Javascript const clock = document.querySelector("#clock"); const date = new Date(); // 시계함수(getClock) 만들기 function getClock(){ // 시, 분, 초 변수 만들기 const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); // clock html element에 변수로 치환하기 clock.innerText = `${hours}:${minutes}:${seconds}`; } // 함..
