천진난만 코딩 스토리

- HTML - quote라는 박스안에 span 두개를 넣어줌. 이 span은 각 명언과 작가이름이 생길 자리임. 새로 만든 js파일도 작성해줌. - JS - const quotes = [ { quote: " ", author: " ", }, . . . { quote: " ", author: " ", }, ]; 를 하여 quotes에 명언들을 배열함. 원하는 만큼 만들면 됨. const quote = document.querySelector("#quote span:first-child"); 를 하여 quote에 html의 quote의 span:first-child를 넣어줌. const author = document.querySelector("#quote span:last-child"); 를 하여 aut..

- HTML - '시간:분:초' 로 만듬. - JS - const clock = document.querySelector("h2#clock"); 를 하여 clock 라는 변하지 않는 변수에 document.querySelector("h2#clock")를 하여 h2의 clock이라는 id를 가진 element를 저장함. function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } 를 하여 시:분:초를 clock의 innerText에 작성하는 getClock란 함수를 만듬. ( new Date() 는 new 키워드를 사용한 new Dat..

- 파일정리 - 파일을 좀 더 편히 보기 위해 정리를 함. 정리하며 app.js는 greetings.js로 변경하고 clock.js를 추가함. - HTML - (주황색 박스) 파일을 폴더에 넣고 이름을 변경했기에 파일의 이름을 변경된 이름과 위치로 작성해줌. (분홍색 박스) 시계를 만드는 코드를 적어줌. - JS - const clock = document.querySelector("h2#clock"); 를 하여 clock 라는 변하지 않는 변수에 document.querySelector("h2#clock")를 하여 h2의 clock이라는 id를 가진 element를 저장함. function sayHello() { console.log("hello"); } 를 하여 hello를 console에 보여주는 ..

- HTML - form에 hidden인 class를 추가함. - JS - const USERNAME_KEY = "username"; 를 하여 localStorage의 key인 저장될 값의 이름인 username를 USERNAME_KEY라는 변수에 저장함. function onLoginSubmit(event) 에 추가로 코드를 작성함. localStorage.setItem(USERNAME_KEY, username); 를 하여 localStorage에 USERNAME_KEY인 username와 username인 loginInput.value을 저장함. paintGreetings(username); 를 하여 paintGreetings(username)인 function을 실행함. function paintG..

- HTML - 를 추가함. - CSS - .hidden { display: none; 를 하여 hidden 라는 class를 가진 요소를 display: none; 하여 보여지지 않도록 함. - JS - const loginForm = document.querySelector("#login-form"); 를 하여 loginForm 라는 변하지 않는 변수에 document.querySelector("#login-form")를 하여 login-form라는 id를 가진 요소를 찾아와 저장함. const loginInput = document.querySelector("#login-form input"); 를 하여 loginInput 라는 변하지 않는 변수에 document.querySelector("#log..

- HTML - 를 하여 div를 form으로 바꿔줌. ('required'라는 기능을 사용하기 위해 바꿈) 를 하여 입력되는 text의 최대길이가 15인 input 박스를 만듬. (required maxlength 는 최대 길이를 말함.) 를 하여 iog in 버튼과 같은 input을 만듬. - JS - const username = loginInput.value; 를 하여 username 이란 변수에 loginInput.value;를 하여 작성되는 text를 저장함. console.log(username); 를 하여 작성되는 text를 보여줌. - 화면 - 오류가 나지만 제대로 작성한 것이 맞음.

- HTML - 로그인 form에 input과 버튼을 넣어줌. js파일도 연결해줌. - JS - const loginInput = document.querySelector("#login-form input"); 를 하여 loginInput 라는 변하지 않는 변수에 document.querySelector("#login-form input")를 하여 login-form input라는 id를 가진 요소를 찾아와 저장함. const loginButton = document.querySelector("#login-form button"); 를 하여 loginButton 라는 변하지 않는 변수에 document.querySelector("#login-form button")를 하여 login-form button..