const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "todos"; let toDos = []; function saveTodos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } function deleteTodo(event) { const li = event.target.parentElement; toDos = toDos.filter(todo => todo.id !== pars..

const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; const chosenImg = images[Math.floor(Math.random() * (images.length))]; const bgImg = document.createElement("img"); bgImg.src = `img/${chosenImg}`; document.body.appendChild(bgImg); img폴더에 갖고있는 이미지 파일의 이름과 같은 문자배열을 만들어준다 Math.random()을 이용해 0부터 1 사이의 랜덤한 숫자를 받아온다(소숫점 아래를 포함하는 float 형태) 내가 필요로 하는 숫자는 0부터 내가 가진 이미지의 총갯수까지의 숫자이기때..

body { padding: 0; margin: 0; } .slide { width: 100%; height: 500px; color: #fff; font-size: 50px; text-align: center; line-height: 500px; position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; transition: all 1s ease-in-out; transform: scale(0.9); } .slide:nth-child(odd) { background-color: rgb(255, 188, 255); } .slide:nth-child(even) { background-color: rgb(168, 213, 255); } .showing { z..

const clock = document.querySelector("h2#clock") function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`; } getClock(); setInterval(getClock, 1000); new Date()를 실행시키면 현재 날짜, 시간을 객체..

Log In input이 가지고 있는 속성을 이용해 입력값의 길이를 제한하거나 필수로 입력값을 받아오도록 설정할 수 있다 해당 속성들을 이용하기위해선 form으로 input을 감싸고 있어야 함 const loginForm = document.querySelector("#loginForm") const loginInput = document.querySelector("#loginForm input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden" const USERNAME = "username" function onLoginsubmit(event) { event.preventDefault(); ..

'use strict'; // async & await // clear style of using promise // 1. async async function fetchUser() { // do network reqeust in 10 secs... return 'bella'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple() { await delay(2000); return '🍎'; } async function getB..