SocialHackersClass10 · Manolispro · Feb 16, 2020
diff --git a/Week3/homework/code along/app.js b/Week3/homework/code along/app.js
@@ -0,0 +1,79 @@
+const app = () =>{
+    const song = document.querySelector(".song");
+    const play = document.querySelector(".play");
+    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");
+    const timeSelect = document.querySelectorAll(".time-select button");
+    //get the length of the outline
+    const outlineLength = outline.getTotalLength();
+    console.log(outlineLength);
+    let fakeDuration = 600;
+
+    outline.style.strokeDasharray = outlineLength;
+    outline.style.strokeDashoffset = outlineLength;
+//pick sounds
+sounds.forEach(sound =>{
+    sound.addEventListener("click", function(){
+
+        song.src = this.getAttribute("data-sound");
+        video.src = this.getAttribute("data-video");
+        checkPlaying(song);
+    });
+});
+
+
+    //play sound
+    play.addEventListener("click", ()=>{
+        checkPlaying(song);
+
+    });
+      //select sound
+      timeSelect.forEach(option => {
+        option.addEventListener( "click" , function(){
+            fakeDuration = this.getAttribute("data-time");
+            timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(fakeDuration % 60)}`;
+        });
+    });
+
+    //function stop play sound
+    const checkPlaying = song =>{
+        if(song.paused){
+            song.play();
+            video.play();
+            play.src ="./svg/pause.svg"
+
+        } else {
+            song.pause();
+            video.pause();
+            play.src = "./svg/play.svg";
+        }
+    };
+
+
+
+   song.ontimeupdate = () =>{
+       let currentTime = song.currentTime;
+       let elapsed = fakeDuration - currentTime ; 
+       let seconds = Math.floor(elapsed % 60);
+       let minutes = Math.floor(elapsed / 60);
+
+       //animate circle
+       let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
+       outline.style.strokeDashoffset = progress;
+       //animate text
+       timeDisplay.textContent = `${minutes}:${seconds}`;
+        if(currentTime >= fakeDuration){
+            song.pause();
+            song.currentTime = 0;
+            play.src = "./svg/play.svg";
+            video.pause();
+        }
+   };
+
+};
+app();
diff --git a/Week3/homework/code along/index.html b/Week3/homework/code along/index.html
@@ -0,0 +1,69 @@
+
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <link rel="stylesheet" href="style.css">
+      <title>Meditation App</title>
+   </head>
+   <body>
+      <div class="app">
+        <div class="vid-container">
+            <video loop >
+            <source src="./video/rain.mp4" type="video/mp4">
+            </video>
+        </div>
+
+         <div class="time-select">
+            <button data-time ="120">2 Minutes</button>
+            <button data-time ="300">5 Minutes</button>
+            <button data-time ="600">10 Minutes</button>
+         </div>
+         <div class="player-container">
+            <audio class="song">
+               <source src="./sounds/rain.mp3">
+            </audio>
+            <img src="./svg/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="./video/rain.mp4">
+            <img src="./svg/rain.svg" alt="rain">
+            </button>
+            <button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4">
+            <img src="./svg/beach.svg" alt="beach">
+            </button>
+
+         </div>
+      </div>
+      <script src="app.js"></script>
+   </body>
+</html>
diff --git a/Week3/homework/code along/sounds/beach.mp3 b/Week3/homework/code along/sounds/beach.mp3
diff --git a/Week3/homework/code along/sounds/rain.mp3 b/Week3/homework/code along/sounds/rain.mp3
diff --git a/Week3/homework/code along/style.css b/Week3/homework/code along/style.css
@@ -0,0 +1,79 @@
+*{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%) rotate(-90deg);
+    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;
+    transition: all 0.5s ease;
+}
+.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: #4972a1;
+}
+.sound-picker button:nth-child(2){
+    background: #a14f49;
+}
+.sound-picker button img{
+    height: 100%;
+}
diff --git a/Week3/homework/code along/svg/beach.svg b/Week3/homework/code along/svg/beach.svg
diff --git a/Week3/homework/code along/svg/moving-outline.svg b/Week3/homework/code along/svg/moving-outline.svg
diff --git a/Week3/homework/code along/svg/pause.svg b/Week3/homework/code along/svg/pause.svg
diff --git a/Week3/homework/code along/svg/play.svg b/Week3/homework/code along/svg/play.svg
diff --git a/Week3/homework/code along/svg/rain.svg b/Week3/homework/code along/svg/rain.svg
diff --git a/Week3/homework/code along/svg/replay.svg b/Week3/homework/code along/svg/replay.svg
diff --git a/Week3/homework/code along/video/beach.mp4 b/Week3/homework/code along/video/beach.mp4
diff --git a/Week3/homework/code along/video/rain.mp4 b/Week3/homework/code along/video/rain.mp4
diff --git a/Week3/homework/credit-card/creditCardValidator.js b/Week3/homework/credit-card/creditCardValidator.js
@@ -0,0 +1,46 @@
+    function sigrisi(pass) {
+    return pass.split('').every(char => char === pass[0]);
+    //You don't have to go over the complete string if the chars do not match. 
+    //src https://stackoverflow.com/questions/41192854/function-that-checks-whether-all-characters-in-a-string-are-equal-javascript-h
+   }
+
+   function sum(pass) {
+    let total = 0;
+    for (i = 0; i < pass.length; i++) {
+     total += parseInt(pass[i]);
+    }
+    return total;
+
+   }
+
+   function credit(pass) {
+    let passString = pass.toString();
+    let a = /^[0-9]+$/;
+    let minima = "invalid";
+    let minima2 = "valid";
+
+    if (!passString.match(a) || passString.length !== 16) {
+     console.log(`${minima} Must be 16 digits only numbers`);
+    } else if (sigrisi(passString) === true) {
+     console.log(`${minima} Same number`);
+
+    } else if (passString.charAt(15) % 2 !== 0) { //charArt function select char in any position you want
+     console.log(`${minima} Last numb mast be even`);
+
+    } else if (sum(passString) <= 16) {
+     console.log(`${minima} The sum mast be 16`);
+
+    } else {
+     console.log(`${minima2}:Password accepted`)
+    }
+
+   }
+//invalid
+   credit("a92332119c011112");
+   credit ("4444444444444444");
+   credit ("1111111111111110" );
+   credit("6666666666666661");
+
+   //valid
+   credit("1111111111111142");
+   credit("5555050000000010");
diff --git a/Week3/homework/js-exercises/amazing.js b/Week3/homework/js-exercises/amazing.js
@@ -0,0 +1,17 @@
+'use strict';
+let giveCompliment = (name) => {
+ let compliment = ["awesome",
+  "smart",
+  "strong",
+  "funny",
+  "brave",
+  "good",
+  "nice",
+  "great",
+ ];
+ let random = compliment[Math.floor(Math.random() * compliment.length)];
+ console.log(`You are ${random},${name}`);
+}
+giveCompliment("manwlis");
+giveCompliment("manwlis");
+giveCompliment("manwlis");
diff --git a/Week3/homework/js-exercises/dogYears.js b/Week3/homework/js-exercises/dogYears.js
@@ -0,0 +1,8 @@
+let calculateDogAge = (age) =>{
+    let dogYears = age * 7;
+    console.log(`Your doggie is ${dogYears} years old in dog years!`);
+
+}
+calculateDogAge(1);
+calculateDogAge(2);
+calculateDogAge(5);
diff --git a/Week3/homework/js-exercises/fortune.js b/Week3/homework/js-exercises/fortune.js
@@ -0,0 +1,17 @@
+const numChilden = [1, 2, 3, 4];
+const partnerNames = ["name1", "name2", "name3", "name4"];
+const location = ["location1", "location2", "location3", "location4"];
+const jobs = ["job1", "job2", "job3", "job4"];
+
+
+
+let tellFortune = (array1, array2, array3, array4) => {
+ let childern = array1[Math.floor(Math.random() * array1.length)];
+ let partner = array2[Math.floor(Math.random() * array2.length)];
+ let place = array3[Math.floor(Math.random() * array3.length)];
+ let job = array4[Math.floor(Math.random() * array4.length)];
+
+
+ console.log(`You will be a ${job} in ${place}, and married to ${partner} with ${childern} kids.`)
+}
+tellFortune(numChilden, partnerNames, location, jobs);
diff --git a/Week3/homework/js-exercises/shopping.js b/Week3/homework/js-exercises/shopping.js
@@ -0,0 +1,14 @@
+'use strict';
+let addToShoppingCard = (item) => {
+    shop.push(item);
+    if (shop.length > 3) {
+     shop.shift();
+
+    }
+
+    console.log(`You bought ${shop}!`);
+   }
+   let shop = ["bananas", "milk", ];
+   addToShoppingCard("apple");
+   addToShoppingCard("beer");
+   addToShoppingCard("tomatoes");