Week2 Finished

Stef-Lev · Jan 14, 2020 · Jan 15, 2020 · Jan 15, 2020 · Jan 15, 2020 · Jan 15, 2020
commit 97ef9416fc9ab0ccfbccae2f3d0ce290eab7fa70
diff --git a/Week2/Homework/js-exercises/readingList.js b/Week2/Homework/js-exercises/readingList.js
@@ -23,4 +23,8 @@ readList.forEach(x => {
 readList.forEach(x => {
     console.log(`${x.title} by ${x.author}`);
 
+})
+//Conditional statements
+readList.forEach(x => {
+    console.log(x.alreadyRead === true ? `You already read "${x.title}"` : `You still need to read "${x.title}"`)
 })
diff --git a/Week2/Homework/js-exercises/whoWantsADrink.js b/Week2/Homework/js-exercises/whoWantsADrink.js
@@ -1,11 +1,18 @@
+//Variables
 const drinkTypes = ["cola", "lemonade", "water"];
 let drinkTray = [];
-
-drinkTypes.forEach(x => {
-    for (i = 0; i < 5; i++) {
-        drinkTray.push(x);
-        return drinkTray;
+let index = 0;
+//Function to check if the drink is repeated
+function isRepeated(drink) {
+    return drink === drinkTypes[index]
+}
+//Loop iterating through the array
+for (let i = 0; i < 5; i++) {
+    drinkTray.push(drinkTypes[index]);
+    if (drinkTray.filter(isRepeated).length === 2) {
+        index += 1;
     }
-})
-
+}
+//Final console.log
+console.log(`Hey guys, I brought a ${drinkTray.join(", ")}!`);
 
diff --git a/Week3/Homework/codeAlong/meditation-app/img/beach.svg b/Week3/Homework/codeAlong/meditation-app/img/beach.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/fa-cloud-rain-solid.svg b/Week3/Homework/codeAlong/meditation-app/img/fa-cloud-rain-solid.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/fa-pause-solid.svg b/Week3/Homework/codeAlong/meditation-app/img/fa-pause-solid.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/fa-play-solid.svg b/Week3/Homework/codeAlong/meditation-app/img/fa-play-solid.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/fa-sun-solid.svg b/Week3/Homework/codeAlong/meditation-app/img/fa-sun-solid.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/moving-outline.svg b/Week3/Homework/codeAlong/meditation-app/img/moving-outline.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/pause.svg b/Week3/Homework/codeAlong/meditation-app/img/pause.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/play.svg b/Week3/Homework/codeAlong/meditation-app/img/play.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/rain.svg b/Week3/Homework/codeAlong/meditation-app/img/rain.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/replay.svg b/Week3/Homework/codeAlong/meditation-app/img/replay.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/img/track-outline.svg b/Week3/Homework/codeAlong/meditation-app/img/track-outline.svg
diff --git a/Week3/Homework/codeAlong/meditation-app/index.html b/Week3/Homework/codeAlong/meditation-app/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="style.css">
+
+    <title>Meditation App</title>
+    <script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div class="app">
+
+        <div class="vid-container">
+            <video loop>
+                <source src="vid/rain.mp4" type="video/mp4">
+            </video>
+        </div>
+
+        <div class="time-select">
+            <button data-time="300">5 minutes</button>
+            <button data-time="600">10 minutes</button>
+            <button data-time="900">15 minutes</button>
+        </div>
+        <div class="player-container">
+            <audio class="song">
+                <source src="sounds/rain.mp3">
+            </audio>
+            <img src="img/play.svg" alt="play" class="play">
+            <svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20" />
+            </svg>
+            <svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20" />
+            </svg>
+            <h3 class="time-display">0:00</h3>
+        </div>
+        <div class="sound-picker">
+            <button data-sound="sounds/rain.mp3" data-video="vid/rain.mp4"><img src="img/rain.svg" alt="rain"></button>
+            <button data-sound="sounds/beach.mp3" data-video="vid/beach.mp4"><img src="img/beach.svg"
+                    alt="beach"></button>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Week3/Homework/codeAlong/meditation-app/script.js b/Week3/Homework/codeAlong/meditation-app/script.js
@@ -0,0 +1,85 @@
+const song = document.querySelector(".song");
+const play = document.querySelector(".play");
+const replay = document.querySelector(".replay");
+const outline = document.querySelector(".moving-outline circle");
+const video = document.querySelector(".vid-container video");
+
+//Sounds
+const sounds = document.querySelectorAll(".sound-picker button");
+//Time Display
+const timeDisplay = document.querySelector(".time-display");
+//Length of outline
+const outlineLength = outline.getTotalLength();
+//Duration
+const timeSelect = document.querySelectorAll(".time-select button");
+let fDuration = 600;
+outline.style.strokeDasharray = outlineLength;
+outline.style.strokeDashoffset = outlineLength;
+timeDisplay.textContent = `${Math.floor(fDuration / 60)}:${Math.floor(
+    fDuration % 60
+)}`;
+
+sounds.forEach(sound => {
+    sound.addEventListener("click", function () {
+        song.src = this.getAttribute("data-sound");
+        video.src = this.getAttribute("data-video");
+        checkPlaying(song);
+    });
+});
+
+
+//Playing sounds
+play.addEventListener("click", () => {
+    checkPlaying(song);
+});
+
+replay.addEventListener("click", () => {
+    restartSong(song);
+
+});
+
+const restartSong = song => {
+    let currentTime = song.currentTime;
+    song.currentTime = 0;
+    console.log("ciao")
+}
+
+timeSelect.forEach(option => {
+    option.addEventListener("click", function () {
+        fDuration = this.getAttribute("data-time");
+        timeDisplay.textContent = `${Math.floor(fDuration / 60)}:${Math.floor(
+            fDuration % 60
+        )}`;
+    });
+});
+
+
+//Stop-play sound function
+const checkPlaying = song => {
+    if (song.paused) {
+        song.play();
+        video.play();
+        play.src = "img/pause.svg";
+    } else {
+        song.pause();
+        video.pause();
+        play.src = "img/play.svg";
+    }
+};
+song.ontimeupdate = function () {
+    let currentTime = song.currentTime;
+    let elapsed = fDuration - currentTime;
+    let seconds = Math.floor(elapsed % 60);
+    let minutes = Math.floor(elapsed / 60);
+    timeDisplay.textContent = `${minutes}:${seconds}`;
+    let progress = outlineLength - (currentTime / fDuration) * outlineLength;
+    outline.style.strokeDashoffset = progress;
+
+    if (currentTime >= fDuration) {
+        song.pause();
+        song.currentTime = 0;
+        play.src = "img/play.svg";
+        video.pause();
+    }
+};
+
diff --git a/Week3/Homework/codeAlong/meditation-app/sounds/beach.mp3 b/Week3/Homework/codeAlong/meditation-app/sounds/beach.mp3
diff --git a/Week3/Homework/codeAlong/meditation-app/sounds/rain.mp3 b/Week3/Homework/codeAlong/meditation-app/sounds/rain.mp3
diff --git a/Week3/Homework/codeAlong/meditation-app/style.css b/Week3/Homework/codeAlong/meditation-app/style.css
@@ -0,0 +1,82 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.app {
+    height: 100vh;
+    display:flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+.time-select, .sound-picker, .player-container {
+    height: 80%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+}
+.player-container {
+    position: relative;
+}
+.player-container svg {
+    position: absolute;
+    height: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    pointer-events: none;
+}
+
+.time-display{
+    position: absolute;
+    bottom: 10%;
+    color: white;
+    font-size: 50px;
+}
+
+video {
+    position:fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    z-index: -10;
+}
+.time-select button, 
+.sound-picker button {
+    color: white;
+    width: 30%;
+    height: 10%;
+    background: none;
+    border: 2px solid white;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 20px;
+}
+time-select button:hover {
+    color: black;
+    background: white;
+}
+.sound-picker button {
+    border: none;
+    height: 120px;
+    width: 120px;
+    border-radius: 50%;
+    padding: 30px;
+}
+.sound-picker button:nth-child(1){
+    background: #018bad;
+
+}
+.sound-picker button:nth-child(2){
+    background: #ff7755;
+
+}
+.sound-picker button img {
+    height: 100%;
+}
+
+
+
+
diff --git a/Week3/Homework/codeAlong/meditation-app/vid/beach.mp4 b/Week3/Homework/codeAlong/meditation-app/vid/beach.mp4
diff --git a/Week3/Homework/codeAlong/meditation-app/vid/rain.mp4 b/Week3/Homework/codeAlong/meditation-app/vid/rain.mp4