Demo Day 18 - Tally String Times with Reduce HTML 코드 깃헙소스 참고하기 바람! JavaScript 코드 const timeNodes = Array.from(document.querySelectorAll("[data-time]")); const seconds = timeNodes .map((node) => node.dataset.time) .map((timeCode) => { const [mins, secs] = timeCode.split(":").map(parseFloat); return mins * 60 + secs; }) .reduce((total, reduceSeconds) => (total += reduceSeconds)); let secondsLeft =..

Demo Day 17 - Sorting Band Names without Articles HTML 코드 CSS 코드 #bands { list-style: inside square; font-size: 20px; background: white; width: 500px; margin: auto; padding: 0; box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05); } #bands li { border-bottom: 1px solid #efefef; padding: 20px; } #bands li:last-child { border-bottom: 0; } a { color: #ffc600; text-decoration: none; } JavaScript 코드 const band..

Demo Day 16 - CSS Text Shadow Mouse Move Effect HTML 코드 🔥WOAH! CSS 코드 .hero { min-height: 100vh; display: flex; justify-content: center; align-items: center; color: black; } h1 { text-shadow: 10px 10px 0 rgba(0, 0, 0, 1); font-size: 100px; } JavaScript 코드 const hero = document.querySelector(".hero"); const text = hero.querySelector("h1"); const walk = 100; // 100px function shadow(e) { const { o..

Demo Day 15 - LocalStorage and Event Delegation HTML 코드 LOCAL TAPAS Loading Tapas... CSS 코드 html { box-sizing: border-box; background: url("oh-la-la.jpeg") center no-repeat; background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; font-family: Futura, "Trebuchet MS", Arial, sans-serif; } *, *:before, *:after { box-sizing: inherit..

Demo Day 14 - Object and Arrays Reference VS Copy JavaScript 코드 // start with strings, numbers and booleans let age = 100; let age2 = age; console.log(age, age2); age = 200; console.log(age, age2); let name = "shigatsu"; let name2 = name; console.log(name, name2); name = "el"; console.log(name, name2); // Let's say we have an array const players = ["Wes", "Sarah", "Ryan", "Poppy"]; // and we wan..

Demo Day 13 - Slide In On Scroll HTML 코드 생략 / 깃헙주소 참고하시길 바랍니다. JavaScript 코드 const slideImages = document.querySelectorAll(".slide-in"); function checkSlide(e) { slideImages.forEach((slideImage) => { // half way through the image const slideInAt = window.scrollY + window.innerHeight - slideImage.height / 2; // bottom of the image const imageBottom = slideImage.offsetTop + slideImage.height; cons..