Vanilla JS 30

TILjavascriptjavascipt30

30 Day Vanilla JS Coding Challenge Study - 1주차

  • JavaScript Drum Kit
  • CSS + JS Clock

1. JavaScript Drum Kit

영상: https://youtu.be/VuN8qwZoego

백그라운드에서 입력받으면 키를 통해 이미 지정된 로컬 경로의 이미지가 실행되는 방식이다.
(CSS 효과도 있다)

1
2
3
4
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
.
.
  • HTML5 <audio> 요소가 사용되었다.
  • 입력받을 키코드를 미리 data-*를 통해 커스텀 어트리뷰트로 정의하였다.
1
2
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  • data-* 셀렉팅 방법
1
2
audio.currentTime = 0;
audio.play();
  • HTML <audio> API 활용
    1
    2
    const keys = Array.from(document.querySelectorAll('.key'));
    keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
  • 굳이 Array.from를 사용하지 않고 for of...만 활용하는 것이 더 좋을 것 같다.

2. CSS + JS Clock

영상: https://youtu.be/xu87YWbr4X0

CSS의 이용한 transform을 이용한 JS Clock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const mins = now.getMinutes();
  const hour = now.getHours();

  const secondsDegrees = (seconds / 60) * 360 + 90;
  const minsDegrees = (mins / 60) * 360 + (seconds / 60) * 6 + 90;
  const hourDegrees = (hour / 12) * 360 + (mins / 60) * 30 + 90;

  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
  • 시분초가 한번에 핸들링 되는 setDate() 함수를 1000밀리세컨드마다 setInterval()을 통해 호출하고 있다.
  • 시분초의 DOM을 미리 정의하고 셀렉팅하여 CSS의 transform : rotate의 각도를 1000밀리세컨드마다 변경해준다.
  • 특별한 로직이 없지만 CSS만으로도 얼마나 많은 효과를 줄 수 있는지 다시 한번 깨닫는다
Share Comments