Meditation App

diff --git a/Week3/homework/code along/app.js b/Week3/homework/code along/app.js new file mode 100644 index 000000000..ec5c6ec79 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/Week3/homework/code along/index.html b/Week3/homework/code along/index.html new file mode 100644 index 000000000..d66c092fb --- /dev/null +++ b/Week3/homework/code along/index.html @@ -0,0 +1,69 @@ + + + + + + + + + Meditation App + + +

+ +

+ + + +

+ + +

0:00

+ + + +

+ + + \ No newline at end of file diff --git a/Week3/homework/code along/sounds/beach.mp3 b/Week3/homework/code along/sounds/beach.mp3 new file mode 100644 index 000000000..dadf37e0e Binary files /dev/null and b/Week3/homework/code along/sounds/beach.mp3 differ diff --git a/Week3/homework/code along/sounds/rain.mp3 b/Week3/homework/code along/sounds/rain.mp3 new file mode 100644 index 000000000..e8425fcc6 Binary files /dev/null and b/Week3/homework/code along/sounds/rain.mp3 differ diff --git a/Week3/homework/code along/style.css b/Week3/homework/code along/style.css new file mode 100644 index 000000000..6704c39e0 --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/Week3/homework/code along/svg/beach.svg b/Week3/homework/code along/svg/beach.svg new file mode 100644 index 000000000..48ba1b9e7 --- /dev/null +++ b/Week3/homework/code along/svg/beach.svg @@ -0,0 +1,10 @@ + diff --git a/Week3/homework/code along/svg/moving-outline.svg b/Week3/homework/code along/svg/moving-outline.svg new file mode 100644 index 000000000..3e75b2c41 --- /dev/null +++ b/Week3/homework/code along/svg/moving-outline.svg @@ -0,0 +1,3 @@ + diff --git a/Week3/homework/code along/svg/pause.svg b/Week3/homework/code along/svg/pause.svg new file mode 100644 index 000000000..b950b26bc --- /dev/null +++ b/Week3/homework/code along/svg/pause.svg @@ -0,0 +1,4 @@ + diff --git a/Week3/homework/code along/svg/play.svg b/Week3/homework/code along/svg/play.svg new file mode 100644 index 000000000..781afc842 --- /dev/null +++ b/Week3/homework/code along/svg/play.svg @@ -0,0 +1,3 @@ + diff --git a/Week3/homework/code along/svg/rain.svg b/Week3/homework/code along/svg/rain.svg new file mode 100644 index 000000000..0a56c9885 --- /dev/null +++ b/Week3/homework/code along/svg/rain.svg @@ -0,0 +1,10 @@ + diff --git a/Week3/homework/code along/svg/replay.svg b/Week3/homework/code along/svg/replay.svg new file mode 100644 index 000000000..91bb750a1 --- /dev/null +++ b/Week3/homework/code along/svg/replay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Week3/homework/code along/video/beach.mp4 b/Week3/homework/code along/video/beach.mp4 new file mode 100644 index 000000000..d7c20b5fb Binary files /dev/null and b/Week3/homework/code along/video/beach.mp4 differ diff --git a/Week3/homework/code along/video/rain.mp4 b/Week3/homework/code along/video/rain.mp4 new file mode 100644 index 000000000..cc0a6d0c5 Binary files /dev/null and b/Week3/homework/code along/video/rain.mp4 differ diff --git a/Week3/homework/credit-card/creditCardValidator.js b/Week3/homework/credit-card/creditCardValidator.js new file mode 100644 index 000000000..5f11d6d4d --- /dev/null +++ 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"); \ No newline at end of file diff --git a/Week3/homework/js-exercises/amazing.js b/Week3/homework/js-exercises/amazing.js new file mode 100644 index 000000000..308a963cb --- /dev/null +++ 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"); \ No newline at end of file diff --git a/Week3/homework/js-exercises/dogYears.js b/Week3/homework/js-exercises/dogYears.js new file mode 100644 index 000000000..1ea212735 --- /dev/null +++ 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); \ No newline at end of file diff --git a/Week3/homework/js-exercises/fortune.js b/Week3/homework/js-exercises/fortune.js new file mode 100644 index 000000000..426309a38 --- /dev/null +++ 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 new file mode 100644 index 000000000..078d3f03d --- /dev/null +++ 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"); \ No newline at end of file diff --git a/Week3/homework/js-exercises/totalCost.js b/Week3/homework/js-exercises/totalCost.js new file mode 100644 index 000000000..d8c03c48c --- /dev/null +++ b/Week3/homework/js-exercises/totalCost.js @@ -0,0 +1,27 @@ +'use strict'; +let calculateTotalPrice = (obj) => { + let total = 0; + + for (let x in obj) { + + total += obj[x]; + + } + return total; +} + +const cartForParty = { + beers: 1.5, + chips: 1, + milk: 0.90, + bread: 0.5, + cheese: 2.5 +}; + +let result = calculateTotalPrice(cartForParty); +console.log(`The total price is ${result}`); + +// with reduce +let totalWithReduce = Object.values(cartForParty).reduce((accumulator, currentValue) => + accumulator + currentValue); +console.log("the total price is " + totalWithReduce); \ No newline at end of file