Updated Files

jordles · Jun 5, 2024 · c663288 · c663288
1 parent e77bcad
commit c663288
Show file tree

Hide file tree

Showing 47 changed files with 1,556 additions and 0 deletions.
diff --git a/Day 01/README.md b/Day 01/README.md
@@ -0,0 +1,16 @@
+# Day 1 Javascript Drum Kit
+
+I decided to go for a hang/handpan drum layout, always loved these drum sounds! 🎶🥬🍃🍂🌿
+
+## Attribution
+
+* [Zen Garden](https://pngtree.com/freebackground/the-zen-garden-as-a-japanese-place_3542915.html)
+* [Steel Pan Drum Samples](https://www.elektronauts.com/t/searching-for-steel-pan-drum-samples/201909)
+* [My Pan Drum Music Samples](https://drive.google.com/file/d/16DRrSGlTM9DtKULUQEC3sei30EBRUIbB)
+* [Handpan Drum](https://www.lighteme.com/products/handpandrum229-1)
+
+
+## Key Topics 
+* Key Events / Listeners - Used keypress listeners to connect the drum keys to the audio and dynamically play them when pressed.  
+* Audio - Used audio elements to play our audio files.  
+* Animation - used css animations to animate the keys when they are played.  
diff --git a/Day 01/assets/AIntegral/A2.wav b/Day 01/assets/AIntegral/A2.wav
diff --git a/Day 01/assets/AIntegral/A3.wav b/Day 01/assets/AIntegral/A3.wav
diff --git a/Day 01/assets/AIntegral/B3.wav b/Day 01/assets/AIntegral/B3.wav
diff --git a/Day 01/assets/AIntegral/C3.wav b/Day 01/assets/AIntegral/C3.wav
diff --git a/Day 01/assets/AIntegral/C4.wav b/Day 01/assets/AIntegral/C4.wav
diff --git a/Day 01/assets/AIntegral/E3.wav b/Day 01/assets/AIntegral/E3.wav
diff --git a/Day 01/assets/AIntegral/E4.wav b/Day 01/assets/AIntegral/E4.wav
diff --git a/Day 01/assets/AIntegral/F3.wav b/Day 01/assets/AIntegral/F3.wav
diff --git a/Day 01/assets/AIntegral/G3.wav b/Day 01/assets/AIntegral/G3.wav
diff --git a/Day 01/assets/handpan-drum.png b/Day 01/assets/handpan-drum.png
diff --git a/Day 01/index.html b/Day 01/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Day 1 - Javascript Drum Kit</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" href="../" />
+    <!-- fixing a favicon issue bug on chrome -->
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
+      rel="stylesheet" />
+    <script src="script.js" defer></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800;900&display=swap");
+    </style>
+  </head>
+  <body>
+    <a href="../" alt="Home"><span class="material-icons-round home">home</span></a>
+    <h2>Day 1 - Javascript (Hang/Handpan) Drum Kit</h2>
+    <section id="handpan-drum">
+      <img src="./assets/handpan-drum.png" alt="handpan-drum" />
+      <div data-key="A" class="key A">
+        <kbd>A</kbd>
+        <span class="sound">A2</span>
+      </div>
+      <div data-key="S" class="key S">
+        <kbd>S</kbd>
+        <span class="sound">F3</span>
+      </div>
+      <div data-key="D" class="key D">
+        <kbd>D</kbd>
+        <span class="sound">C4</span>
+      </div>
+      <div data-key="F" class="key F">
+        <kbd>F</kbd>
+        <span class="sound">B3</span>
+      </div>
+      <div data-key="G" class="key G">
+        <kbd>G</kbd>
+        <span class="sound">E3</span>
+      </div>
+      <div data-key="H" class="key H">
+        <kbd>H</kbd>
+        <span class="sound">A3</span>
+      </div>
+      <div data-key="J" class="key J">
+        <kbd>J</kbd>
+        <span class="sound">C3</span>
+      </div>
+      <div data-key="K" class="key K">
+        <kbd>K</kbd>
+        <span class="sound">E4</span>
+      </div>
+      <div data-key="L" class="key L">
+        <kbd>L</kbd>
+        <span class="sound">G3</span>
+      </div>
+    </section>
+    <h2>🍃🥬Zen out and relax!🌿🍂</h2>
+    <audio data-key="A" src="assets/AIntegral/A2.wav"></audio>
+    <audio data-key="S" src="assets/AIntegral/A3.wav"></audio>
+    <audio data-key="D" src="assets/AIntegral/B3.wav"></audio>
+    <audio data-key="F" src="assets/AIntegral/C3.wav"></audio>
+    <audio data-key="G" src="assets/AIntegral/C4.wav"></audio>
+    <audio data-key="H" src="assets/AIntegral/E3.wav"></audio>
+    <audio data-key="J" src="assets/AIntegral/E4.wav"></audio>
+    <audio data-key="K" src="assets/AIntegral/F3.wav"></audio>
+    <audio data-key="L" src="assets/AIntegral/G3.wav"></audio>
+  </body>
+</html>
diff --git a/Day 01/script.js b/Day 01/script.js
@@ -0,0 +1,22 @@
+
+window.addEventListener('keypress', function(event){
+  const audio = document.querySelector(
+    `audio[data-key="${event.key.toUpperCase()}"]`
+  );
+  const key = document.querySelector(
+    `.key[data-key="${event.key.toUpperCase()}"]`
+  );
+  if (!audio) return;
+  audio.currentTime = 0;
+  audio.play();
+
+  key.classList.remove("playing");
+  /* void key.offsetWidth; */
+  requestAnimationFrame((time) => { //run an animation again, while it's still playing (mdn's solution)
+    requestAnimationFrame((time) => {
+        key.classList.add("playing");
+    });
+  });
+
+})
+//keyCode is depreciated, so lets use event.key instead
diff --git a/Day 01/style.css b/Day 01/style.css
@@ -0,0 +1,207 @@
+*{
+    box-sizing: border-box;
+    font-family: "Inknut Antiqua", serif;
+    text-align: center;
+}
+html, body{
+
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+body{
+    background: url('https://png.pngtree.com/background/20230615/original/pngtree-the-zen-garden-as-a-japanese-place-picture-image_3542915.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    background-attachment: fixed;
+}
+
+
+@keyframes expand{
+    from{
+        opacity: 1;
+        transform: scale(1);
+        border: solid rgba(255,255,255, 0.15);
+    }
+    to{
+        transform: scale(3);
+        border: solid rgba(255,255,255, 0.15);
+        opacity: 0;
+    }
+}
+
+.home{
+    position:fixed;
+    top:0;
+    left: 0;
+    padding: 1%;
+}
+
+#handpan-drum{
+    /* border: solid black; */
+    width: auto;
+    height: auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* transform: rotate(25deg); */
+}
+
+#handpan-drum .key{
+    position: absolute;
+    /* border: solid black; */
+    /* filter: blur(5px); */
+    height: 18%;
+    width: 15%;
+    border-radius: 50%;
+    transform-origin: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* font-size: 1.5em; */
+    transition: all 1s;
+}
+#handpan-drum .key::after{
+    /* transform: scale(1);
+    opacity: 1; */
+
+    content: '';
+    position: absolute;
+    filter: blur(2px);
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    /* transition: all 2.5s; */
+    border: solid transparent;
+}
+
+#handpan-drum .key.playing::after{
+    /* transform: scale(3);
+    border: solid rgba(255,255,255, 0.15);
+    opacity: 0; */
+    animation: expand 2.5s; 
+}
+
+kbd{
+    font-size: 2rem;
+    font-weight: 800;
+    filter: drop-shadow(2px 0px 0 white)
+    drop-shadow(0px -2px 0 white)
+    drop-shadow(-2px 0px 0 white)
+    drop-shadow(0px 2px 0 white)
+    ;
+}
+
+.sound{
+    font-style: italic;
+    color: red;
+    position: absolute;
+    bottom: 12%;
+}
+
+#handpan-drum > .key.A{
+    flex-direction: row;
+    top: 13%;
+    left: 33.5%;
+    transform: rotate(80deg);
+}
+.A kbd, .A span{
+    transform: rotate(-80deg);
+}
+#handpan-drum > .key.S{
+    top: 30%;
+    left: 18%;
+    transform: rotate(30deg);
+    /* transform: perspective(100px) rotateZ(35deg) rotateY(350deg); */
+}
+.S kbd, .S span{
+    transform: rotate(-30deg);
+}
+
+#handpan-drum > .key.D{
+    bottom: 30%;
+    left: 19%;
+    transform: rotate(-10deg);
+}
+.D kbd, .D span{
+    transform: rotate(10deg);
+}
+
+#handpan-drum > .key.F{
+    bottom: 17%;
+    left: 33.5%;
+    transform: rotate(-40deg);
+}
+.F kbd, .F span{
+    transform: rotate(40deg);
+}
+
+#handpan-drum > .key.G{
+    left: 44.8%;
+    top: 41%;
+    height: 12%;
+    width: 12%;
+}
+.key.G .sound{
+    bottom: -5%;
+}
+#handpan-drum > .key.H{
+    bottom: 17%;
+    right: 33.5%;
+    transform: rotate(40deg);
+}
+.H kbd, .H span{
+    transform: rotate(-40deg);
+}
+
+#handpan-drum > .key.J{
+    bottom: 29%;
+    right: 19%;
+    transform: rotate(10deg);
+}
+.J kbd, .J span{
+    transform: rotate(-10deg);
+}
+
+#handpan-drum > .key.K{ 
+    top: 33%;
+    right: 16%;
+    transform: rotate(-25deg);
+}
+.K kbd, .K span{
+    transform: rotate(25deg);
+}
+
+#handpan-drum > .key.L{
+    top: 16%;
+    right: 28%;
+    transform: rotate(-65deg)
+}
+.L kbd, .L span{
+    transform: rotate(65deg);
+}
+
+
+@media all and (max-width:560px){
+    #handpan-drum{
+        width: 100%;
+        height: auto;
+    }
+    #handpan-drum img{
+        width: 100%;
+    }
+
+    .sound{
+        bottom: -10%;
+    }
+    .key.G .sound{
+        bottom: -40%;
+    }
+}
diff --git a/Day 02/README.md b/Day 02/README.md
@@ -0,0 +1,16 @@
+# Day 2 CSS + JS Clock
+
+Inspiration is drawn from Mike Mak. If you hover over the minute hand, you will see the second hand.  
+I was going for a horror vibe, the idea is someone is stalking you... 👁️👄👁️
+
+## Attribution
+
+* [Eye Clock Design/Inspiration](https://www.mikemak.com/)
+* [Background Photo](https://unsplash.com/photos/man-in-grey-t-shirt-wearing-black-cap-v6CsrFKOxY4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+
+## KEY TOPICS
+
+* Transform - Used transform to rotate our clock hands
+* Transition - Used to animate our clock hands
+* Date - Date Object helps us grab the current time and manipulate as we please.
+* Set Interval - this method allows us to call a function on a fixed timed delay
diff --git a/Day 02/index.html b/Day 02/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset = 'UTF-8'>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="../normalize.css">
+        <link rel="stylesheet" href="../reset.css">
+        <link rel="stylesheet" href="style.css">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
+        <title>Day 2 - CSS + JS Clock</title>
+        <script src="script.js" defer></script>
+        <style>
+        @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
+        </style>
+    </head>
+    <body>
+        <div class="background">
+            <a href="../" alt="Home"><span class="material-icons-round home">home</span></a>
+            <img src="media/timothy-barlin-v6CsrFKOxY4-unsplash.jpg">
+            <div class="clock one">
+                <div class="clock-face">
+                    <div class="hand hour-hand"></div>
+                </div>
+            </div>
+            <div class="clock two">
+                <div class="clock-face">
+                    <div class="hand second-hand"></div>
+                    <div class="hand min-hand"></div>
+                </div>
+            </div>
+            <div class="digital"></div>
+            <p>i always feel like somebody's watching me... </p>
+            <p>Tick...tock...tik...</p>
+            <footer>
+                Photo by <a href="https://unsplash.com/@timbar?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Timothy Barlin</a> on <a href="https://unsplash.com/photos/man-in-grey-t-shirt-wearing-black-cap-v6CsrFKOxY4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" >Unsplash</a>
+            </footer>
+        </div>
+
+    </body>
+</html>
diff --git a/Day 02/media/timothy-barlin-v6CsrFKOxY4-unsplash.jpg b/Day 02/media/timothy-barlin-v6CsrFKOxY4-unsplash.jpg