devhimall · devhimall · Nov 22, 2024 · Dec 5, 2024 · Dec 5, 2024 · Dec 8, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/audioplayer/assets/maile.mp3 b/audioplayer/assets/maile.mp3
diff --git a/audioplayer/audioplayer.html b/audioplayer/audioplayer.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Audio Player</title>
+    <link rel="stylesheet" href="/javascript/audioplayer/styles/audioplayer.css">
+
+</head>
+
+<body>
+    <section class="audio-player-wrapper">
+        <header class="audio-player-wrapper__heading">
+            <h1>Hi, this is audio or music player build using ismple html, css, and javascript</h1>
+            <p>This is a simple audio player with the functinality of play, pause, next, and farward. Here i have used
+                custom timing, next, pause, play and back functionality.</p>
+        </header>
+        <div class="audio-player-wrapper__audio-wrapper">
+            <div class="audio-player-wrapper__image">
+                <img src="/javascript/day5/assets/image1.jpg" alt="circle profile image of the audio player"
+                    aria-label="This is the cover image of the audio.">
+            </div>
+
+            <figure>
+                <audio id="audio-player" class="audio-player-wrapper__audio-player"
+                    src="/javascript/audioplayer/assets/maile.mp3">
+                </audio>
+                <figcaption>Maile Covered by John Chamling Rai</figcaption>
+                <div id="audio-player-wrapper__progressContainer">
+                    <input id="progressBar" type="range" min="0" max="100" value="0">
+                </div>
+                <p class="audio-player-wrapper__timer">00:00</p>
+                <div class="audio-player-wrapper__controls">
+                    <button class="audio-player-wrapper__skipPrev">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-skip-start" viewBox="0 0 16 16">
+                            <path
+                                d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L5 8.752V12a.5.5 0 0 1-1 0zm7.5.633L5.696 8l5.804 3.367z" />
+                        </svg>
+                    </button>
+                    <button class="audio-player-wrapper__play">
+
+                        <!-- by default the icons is play -->
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-play-fill" viewBox="0 0 16 16">
+                            <path
+                                d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393" />
+                        </svg>
+                    </button>
+
+                    <button class="audio-player-wrapper__nextSkip"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+                            height="16" fill="currentColor" class="bi bi-skip-end" viewBox="0 0 16 16">
+                            <path
+                                d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.713 3.31 4 3.655 4 4.308v7.384c0 .653.713.998 1.233.696L11.5 8.752V12a.5.5 0 0 0 1 0zM5 4.633 10.804 8 5 11.367z" />
+                        </svg>
+                    </button>
+                </div>
+            </figure>
+
+
+        </div>
+    </section>
+
+
+    <!-- script  -->
+    <script src="/javascript/audioplayer/js/audioplayer.js"></script>
+</body>
+
+</html>
diff --git a/audioplayer/js/audioplayer.js b/audioplayer/js/audioplayer.js
@@ -0,0 +1,77 @@
+let audioPlayer = document.getElementById("audio-player")
+let progressBar = document.getElementById("progressBar")
+let timer = document.querySelector(".audio-player-wrapper__timer")
+let audioPlayerWrapper = document.querySelector(".audio-player-wrapper")
+
+// controls
+let playBtn = document.querySelector(".audio-player-wrapper__play")
+let skipPrev = document.querySelector(".audio-player-wrapper__skipPrev")
+let skipNext = document.querySelector(".audio-player-wrapper__nextSkip")
+
+document.addEventListener("DOMContentLoaded", () => {
+  // Update progress bar as the audio plays
+  audioPlayer.addEventListener("timeupdate", () => {
+    const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100
+    progressBar.value = progress
+
+    // Calculate total time and current time
+    let totalSeconds = Math.floor(audioPlayer.duration || 0)
+    let minutes = Math.floor(totalSeconds / 60)
+    let seconds = totalSeconds % 60
+
+    let currentSeconds = Math.floor(audioPlayer.currentTime || 0)
+    let currentMinutes = Math.floor(currentSeconds / 60)
+    let currentDisplaySeconds = currentSeconds % 60
+
+    timer.innerHTML = `${currentMinutes
+      .toString()
+      .padStart(2, "0")}:${currentDisplaySeconds
+      .toString()
+      .padStart(2, "0")} / ${minutes}:${seconds.toString().padStart(2, "0")}`
+  })
+
+  // Play and pause functionality
+  playBtn.addEventListener("click", () => {
+    if (audioPlayer.paused) {
+      audioPlayer.play()
+    } else {
+      audioPlayer.pause()
+    }
+  })
+
+  // Update play/pause button icon
+  audioPlayer.addEventListener("play", () => {
+    playBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause" viewBox="0 0 16 16"><path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5" /></svg>`
+  })
+
+  audioPlayer.addEventListener("pause", () => {
+    playBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393" /></svg>`
+  })
+
+  // Skip functionality
+  skipPrev.addEventListener("click", () => {
+    audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10)
+  })
+
+  skipNext.addEventListener("click", () => {
+    audioPlayer.currentTime = Math.min(
+      audioPlayer.duration,
+      audioPlayer.currentTime + 10
+    )
+  })
+
+  // Dragging progress bar
+  progressBar.addEventListener("input", (e) => {
+    const newTime = (progressBar.value / 100) * audioPlayer.duration
+    audioPlayer.currentTime = newTime
+  })
+
+  // Update progress bar and handle drag
+  progressBar.addEventListener("mousedown", () => {
+    audioPlayer.pause() // Pause audio while dragging
+  })
+
+  progressBar.addEventListener("mouseup", () => {
+    audioPlayer.play() // Resume audio after dragging
+  })
+})
diff --git a/audioplayer/styles/audioplayer.css b/audioplayer/styles/audioplayer.css
@@ -0,0 +1,110 @@
+@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  font-family: "Courier Prime", monospace;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.audio-player-wrapper {
+  min-height: 100vh;
+  width: 100vw;
+  height: 100%;
+  padding-top: 50px;
+  padding-inline: 50px;
+  margin-bottom: 100px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 50px;
+}
+.audio-player-wrapper__heading {
+  text-align: center;
+  line-height: 40px;
+}
+.audio-player-wrapper__heading h1 {
+  font-size: 32px;
+}
+.audio-player-wrapper__heading p {
+  font-size: 20px;
+}
+.audio-player-wrapper__audio-wrapper {
+  border: 1px solid #c1d8c3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  gap: 20px;
+  height: 500px;
+  width: 400px;
+  border-radius: 10px;
+  padding: 0px 50px;
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+.audio-player-wrapper figure {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.audio-player-wrapper figure figcaption {
+  line-height: 30px;
+  text-transform: capitalize;
+}
+.audio-player-wrapper__image {
+  border: 1px solid orangered;
+  overflow: hidden;
+  height: 180px;
+  width: 180px;
+  border-radius: 100%;
+  filter: drop-shadow(0 0 1.5rem #94c0f3);
+  animation: circle 2s infinite alternate;
+}
+@keyframes circle {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 0.98;
+  }
+  100% {
+    scale: 1;
+  }
+}
+.audio-player-wrapper__image img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: top;
+     object-position: top;
+}
+.audio-player-wrapper__controls {
+  display: flex;
+  justify-content: space-between;
+  padding-block: 20px;
+}
+.audio-player-wrapper__controls button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  width: 30px;
+  border: none;
+  background: none;
+}
+.audio-player-wrapper__controls button svg {
+  height: 50px;
+  width: 50px;
+  fill: #0075ff;
+}
+
+#audio-player-wrapper__progressContainer {
+  width: 100%;
+}
+#audio-player-wrapper__progressContainer input[type=range] {
+  width: 100%;
+  height: 100%;
+}/*# sourceMappingURL=audioplayer.css.map */
diff --git a/audioplayer/styles/audioplayer.css.map b/audioplayer/styles/audioplayer.css.map
diff --git a/audioplayer/styles/audioplayer.scss b/audioplayer/styles/audioplayer.scss
@@ -0,0 +1,125 @@
+@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  font-family: "Courier Prime", monospace;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.audio-player-wrapper {
+  min-height: 100vh;
+  width: 100vw;
+  height: 100%;
+  padding-top: 50px;
+  padding-inline: 50px;
+  margin-bottom: 100px;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 50px;
+
+  &__heading {
+    text-align: center;
+    line-height: 40px;
+    h1 {
+      font-size: 32px;
+    }
+
+    p {
+      font-size: 20px;
+    }
+  }
+
+  &__audio-wrapper {
+    border: 1px solid #c1d8c3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    gap: 20px;
+    height: 500px;
+    width: 400px;
+    border-radius: 10px;
+    padding: 0px 50px;
+    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  figure {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    figcaption {
+      line-height: 30px;
+      text-transform: capitalize;
+    }
+  }
+
+  &__image {
+    border: 1px solid orangered;
+    overflow: hidden;
+    height: 180px;
+    width: 180px;
+    border-radius: 100%;
+    filter: drop-shadow(0 0 1.5rem #94c0f3);
+    animation: circle 2s infinite alternate;
+
+    @keyframes circle {
+      0% {
+        scale: 1;
+      }
+      50% {
+        scale: 0.98;
+      }
+      100% {
+        scale: 1;
+      }
+    }
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      object-position: top;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    justify-content: space-between;
+    padding-block: 20px;
+
+    button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+      width: 30px;
+      border: none;
+      background: none;
+
+      svg {
+        height: 50px;
+        width: 50px;
+        fill: #0075ff;
+      }
+    }
+  }
+
+  //   &__timer {
+  //   }
+}
+
+#audio-player-wrapper__progressContainer {
+  width: 100%;
+
+  input[type="range"] {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/day1/assignment1.js → day1/assignment.js b/day1/assignment1.js → day1/assignment.js
@@ -1,3 +1,4 @@
+let result = document.getElementsByClassName("result")
 // Define Array and objects and console them with appropriate console tools.
 
 // Defining an array