Vanilla JS (3) 썸네일형 리스트형 [Project] CSS 변수 제어 CSS Variables cuttingworms.github.io - 프로젝트 개요 JavaScript를 이용하여 여러가지 CSS 변수들을 제어 사진을 감싸는 공간의 크기와 색깔, 불투명도를 조절 - HTML + CSS + JavaScript Code Control CSS Variables with JS Spacing : Blur : Base Color : querySelectorAll 함수를 사용하여 controls 클래스의 input NodeList를 inputs에 저장 handleUpdate 함수 사이즈의 단위인 px를 suffix로 넣어주기 위해 data- 속성의 sizing을 suffix에 저장 setProperty 함수를 사용하여 변화한 값 뒤에 suffix를 추가하여 업데이트 NodeList.. [Project] 아날로그 시계 Clock 12 1 2 3 4 5 6 7 8 9 10 11 cuttingworms.github.io - 프로젝트 개요 JavaScript와 CSS를 활용한 아날로그 시계 - JavaScript Code const secondHand = document.querySelector('.second-hand'); const minuteHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand') function setDate() { const now = new Date(); const seconds = now.getSeconds(); const minutes = now.getMinutes(); con.. [Project] 드럼 패드 webpad A clap S hihat D kick F openhat G boom H ride J snare K tom L tink cuttingworms.github.io - 프로젝트 개요 키보드 입력을 받아 해당하는 드럼 소리를 출력하는 웹 어플리케이션 - JavaScript Code function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audio) return; audio.currentTime = 0; audio.play(); key.classList... 이전 1 다음
