From 295894869e600bf4f585b09f7a5611ab1ecd66de Mon Sep 17 00:00:00 2001 From: Charles Showalter Date: Tue, 14 Feb 2023 09:33:34 -0800 Subject: [PATCH] Day 2 - JS Clock --- Drum Kit [1-30]/day1.svg | 21 +++++++++ JS Clock [2-30]/index.html | 97 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+) create mode 100644 Drum Kit [1-30]/day1.svg create mode 100644 JS Clock [2-30]/index.html diff --git a/Drum Kit [1-30]/day1.svg b/Drum Kit [1-30]/day1.svg new file mode 100644 index 0000000..5d96d05 --- /dev/null +++ b/Drum Kit [1-30]/day1.svg @@ -0,0 +1,21 @@ +
+
+
+
+
+
+
+
index.html
+
+
+
61626364656667686970717273747576777879
+
+ +
<script>
  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.add('playing');
  }

  function removeTransition(e){
    if(e.propertyName !== 'transform') return;
    this.classList.remove('playing');
  }

  const keys = document.querySelectorAll('.key');
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  window.addEventListener('keydown', playSound);
</script>
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/JS Clock [2-30]/index.html b/JS Clock [2-30]/index.html new file mode 100644 index 0000000..614b920 --- /dev/null +++ b/JS Clock [2-30]/index.html @@ -0,0 +1,97 @@ + + + + + JS + CSS Clock + + + + + +
+
+
+
+
+
+
+ + + + + +