Demo Day 06 - Ajax Type Ahead HTML 코드 Filter for a city or a state JavaScript 코드 const searchInput = document.querySelector(".search"); const suggestions = document.querySelector(".suggestions"); const END_POINT = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; // 매치가 되는 것을 찾아서 map -> join을 거쳐 큰 Strin..

Demo Day 05 - Flex Panels Image Gallery HTML코드 Jahard God Yuri Agero Agnis Kun Bam of 25th Rekeuleisyeo Rak Jahard Tower Endorsi CSS 코드 html { box-sizing: border-box; background: lightblue; font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; } .panel { b..

Demo Day 04 - Array Cardio Day 1 JavaScript 코드 const inventors = [ { first: "Albert", last: "Einstein", year: 1879, passed: 1955 }, { first: "Isaac", last: "Newton", year: 1643, passed: 1727 }, { first: "Galileo", last: "Galilei", year: 1564, passed: 1642 }, { first: "Marie", last: "Curie", year: 1867, passed: 1934 }, { first: "Johannes", last: "Kepler", year: 1571, passed: 1630 }, { first: "Nic..

Demo Day 03 - Playing with CSS variables and JS HTML 코드 Update CSS Variables with JS Spacing: Blur: Base Color CSS 코드 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; background: #193549; color: white; font-family: "helvetica neue", sans-serif; font-weight: 100; font-size: 50px; } .hl { color: var(--base); } .controls { margin-bottom: 50px; } input { width: 10..

Demo Day 02 - JS and CSS Clock HTML 코드 12 1 2 3 4 5 6 7 8 9 10 11 CSS 코드 html { background: #018ded url(https://videohive.img.customer.envatousercontent.com/files/257066021/Clock%20Background.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=defc6e5bd5caa1ca60fa52e4ae70185f); background-size: 100vw 100vh; font-family: "helvetica neue"; text-align: center; font-size: 10px; } bod..

DemoJavaScript Drum KitHTML 코드 A Sound1 S Sound2 D Sound3 F Sound4 G Sound5 H Sound6 J Sound7 K Sound8 L Sound9 JavaScript 코드 const keys = document.querySelectorAll(".key"); function removeTransition(event) { if (event.propertyName !== "transform") return; event.target.classList.remove("playing"); } function playSound(event) { const audio = document.querySelector(`audio[data-key="${event.keyCode..