Demo Day 24 - Sticky Nav HTML 코드 A story about getting lost. LOST. Home About Images Locations Maps Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibu..

Demo Day 23 - Speech Synthesis HTML 코드 The Voiceinator 5000 Select A Voice Rate: Pitch: Hello! I love JavaScript 👍 Stop! Speak JavaScript 코드 const msg = new SpeechSynthesisUtterance(); let voices = []; const voicesDropdown = document.querySelector('[name="voice"]'); const options = document.querySelectorAll('[type="range"], [name="text"]'); const speakButton = document.querySelector("#speak"); c..

Demo Day 22 - Follow Along Links HTML 코드 깃헙 소스를 참고하시길 바랍니다. CSS 코드 body { min-height: 100vh; margin: 0; /* Important! */ font-family: sans-serif; background: linear-gradient( 45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70% ), linear-gradient( 135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80% ), linear-gradient( 225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0..

Demo Day 21 - Geolocation based Speedometer and Compass HTML 코드 (너무 길어서 생략) 0 KM/H CSS 코드 html { font-size: 100px; } body { margin: 0; font-family: sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba..

Demo Day 20 - Native Speech Recognition HTML 코드 JavaScript 코드 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.interimResults = true; const words = document.querySelector(".words"); let p = document.createElement("p"); words.appendChild(p); recognition.addEventListener("result", (e) => { const transcri..

Demo Day 19 - Unreal Webcam Fun HTML 코드 Take Photo Red Min: Red Max: Green Min: Green Max: Blue Min: Blue Max: JavaScript 코드 const video = document.querySelector(".player"); const canvas = document.querySelector(".photo"); const ctx = canvas.getContext("2d"); const strip = document.querySelector(".strip"); const snap = document.querySelector(".snap"); function takePhoto() { // played the sound s..