Demo Day 30 - Whack A Mole Game HTML 코드 Whack-a-mole! 0 Best Score! 0 Start! CSS 코드 body { padding: 0; margin: 0; font-family: "Amatic SC", cursive; display: flex; flex-direction: column; align-items: center; } h1 { text-align: center; font-size: 10rem; line-height: 1; margin-bottom: 0; } button { margin-top: 20px; width: 100px; height: 30px; } .score { background: rgba(255, 255, 255, 0.2); padd..

Demo Day 29 - Countdown Clock HTML 코드 20 Secs Work 5 Quick 15 Snack 20 Lunch Break CSS 코드 생략하겠습니다. 별 게 없는 듯 합니다. JavaScript 코드 const timerDisplay = document.querySelector(".display__time-left"); const endTimeDisplay = document.querySelector(".display__end-time"); const buttons = document.querySelectorAll("[data-time]"); let countDown; function timer(seconds) { // clear any exist times clearInter..

Demo Day 28 - Video Speed Controller UI HTML 코드 1× CSS 코드 body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #4c4c4c url("https://unsplash.it/1500/900?image=1021"); background-size: cover; font-family: sans-serif; } .wrapper { width: 850px; display: flex; } video { box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1); } .speed { background: #efefe..

Demo Day 27 - Click and Drag to Scroll HTML 코드 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 CSS 코드 body { min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: sans-serif; font-size: 20px; margin: 0; } .items { height: 800px; padding: 100px; width: 100%; border: 1px solid white; overflow-x: scroll; overflow-y: hidden; white-spa..

Demo Day 26 - Stripe Follow Along Dropdown HTML 코드 Cool About Me Hi! I'm tsuel, I want to become a fullstack developer Courses VanillaJS Cloning youtube with Vanilla JS HTML+CSS Cloning kakaotak with HTML + CSS Commit Daily Commit Review 33 JS concepts review Foundataion JavaScript Foundataion Other Links Github Blog CSS 코드 html { box-sizing: border-box; font-family: "Arial Rounded MT Bold", "He..

Demo Day 25 - Event Capture, Propagation, Bubbling and Once HTML 코드 JavaSciprt 코드 const divs = document.querySelectorAll("div"); const button = document.querySelector("button"); function logText(e) { console.log(this.classList.value); // e.stopPropagation(); } function init() { divs.forEach((div) => div.addEventListener("click", logText)); // document.body.addEventListener("click", logText); /* ..