목록Front-End (18)
Wanna be Brilliant Full-Stack Developer
목표 To Do List를 만들어보자! 첫번쨰로 우리가 필요한것은 form 이 필요하다 왜냐하면 사용자가 todo를 입력해야만 하고 list도 필요하다.사용자가 todo를 나열할 수 있어야 하기떄문이다! Log In 00:00:00 이제는 form 과 ul을 JS로 가져가보자! form은 submit이벤트를(새로고침) 가지고 fucnction을 만들어 이 기본동작을 막아보려고한다 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event.preventDefault(); } toDoForm.addE..
목표 무작위성(Randomness)에 대해 이야기해보려고한다! 우리가 하고자 하는건 첫번쨰로는 Array안에 있는 elment에 어떻게 접근하는가다 만약에 array에 10개의 item이 있다면 10 -1 로 마지막 element에 접근할 수 있다. 그래서 1부터 9사이에 랜덤적인 숫자를 구하기위한 function을 만들어보려고한다! Math는 흥미로운 function들을 많이 가지고있는데 그중 하나가 random()이다. 1부터 10사이에 숫자를 얻으려면 Math.random() *10을 곱하면 0에서 10사이의 숫자들을 얻을 수 있다. 근데 숫자가 너무나 길다. 왜냐하면 이거는 integer이 아니라 float값이 나왔기 때문이다. 이것을 짧게 만드는 방법은 세가지가 있는데 1. Math.round(..
목표 시계 만들기! 그러면 이제 부터 intervals와 timeout에 대해 먼저 얘기 해보려고한다! intervals이 무엇이냐? 인터벌은 매번 일어나야 하는 무언가를 말한다 예를 들어 매 2초마다 네가 무슨일이 일어나게 하고싶을떄 그것이 인터벌이다. const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } 만약에 이 함수를 매 2초마다 실행하고 싶으면? 다행이 자바스크립트는 이 개념을 가지고 있다. ex) 서버를 확인한다거나 2초마다 주식시장api를 확인하거나 , 5초에 한번씩일어나는 작업이거나 이런 개념이 자바스크립트에도 있다. 이런 기능을 제공하는 tool이 바로 setINterva..
이제 할일은 localStorage에 유저정보 유무를 확인할것이다! 그러면 어떻게 유저정보 유무를 확인 할 수 있을까?? localStorage.getItem("username") 만약에 username이 없으면 null값으로 결과를 받는다! const savedUsername = localStorage.getItem("username"); console.log(savedUsername); const loginInput = document.querySelector("#login-form input"); const loginForm = document.querySelector("#login-form"); const greeting = document.querySelector("#greeting") cons..