코딩이야기/JS공부7 [JavaScript] - 로그인 폼 만들기 ① 만들고 싶은 폼 조건: 로그인 input에 이름을 입력하고 enter나 로그인 버튼을 눌렸을 때 로그인 폼은 사라지고 인사말이 나오며 인사말은 새로고침 해도 초기화되지 않는다. 시작! How? 1. 로그인 폼에서 submit 이벤트가 일어나면 로그인폼은 사라지고 사용자가 입력한 value는 로컬 스토리지에 저장하는 함수를 만들어줍니다. 2. 사라져있던 인사말이 나오면서 로컬스토리지에 있는 value값을 이용해 인사말을 span에 넣어줍니다. 3. if문을 이용하여 로컬스토리지에 값이 없으면 로그인폼이 나타나고 값이 있으면 인사말이 나오게 합니다. (로컬스토리지에 있는 값을 불러오기 때문에 새로고침해도 인사말을 초기화 되지 않습니다.) 4. 로그아웃 버튼을 이용해 로컬스토리지에 있는 값을 삭제할 수 있게 .. 2022. 7. 15. [JavaScript] - 디데이 타이머 간단한 디데이 타이머 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 크리스마스 디데이 00:00:00 Colored by Color Scripter cs Html에 JS에서 불러올 수 있는 id나 class를 가진 항목을 만듭니다. 1 2 3 4 5 6 const clock = document.querySelector("#clock"); const SECOND = 1000; //초 const MINUTE = 1000 * 60; //분 const HOUR = 1000 * 60 * 60; //시 const DAY = 1000 * 60 * 60 * 24; //일 cs 시계를 만들어 주기 위해 JS에서 Html 요소를 불러옵니다. 자바스크립트에서 시간은 ms(밀리초)단위를.. 2022. 7. 15. [JavaScript] 랜덤숫자게임 위와 같은 랜덤 숫자게임을 만들기 위해 Html에 h1과 form, input 요소를 생성해줍니다. answer-form은 "hidden"이라는 클래스를 주고 css에 .hidden { 이라는 값을 만들어서 숨겨줍니다 display: none; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Random Number Game Generate a number between 0 and Guess the number: play! Colored by Color Scripter cs JS를 이용해 이제 랜덤숫자게임 기능을 만들어 줄 겁니다. 우선 querySelector를 이용해 Js에서 Html .. 2022. 7. 11. 이전 1 2 다음
