Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1fa4154

Browse files
ManolisproManolispro
committed
finished homework week2
1 parent a654b60 commit 1fa4154

File tree

19 files changed

+387
-0
lines changed

19 files changed

+387
-0
lines changed

‎Week3/homework/code along/app.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const app = () =>{
2+
const song = document.querySelector(".song");
3+
const play = document.querySelector(".play");
4+
const outline = document.querySelector(".moving-outline circle");
5+
const video = document.querySelector(".vid-container video");
6+
7+
//sounds
8+
const sounds = document.querySelectorAll(".sound-picker button");
9+
//time display
10+
const timeDisplay = document.querySelector(".time-display");
11+
const timeSelect = document.querySelectorAll(".time-select button");
12+
//get the length of the outline
13+
const outlineLength = outline.getTotalLength();
14+
console.log(outlineLength);
15+
let fakeDuration = 600;
16+
17+
outline.style.strokeDasharray = outlineLength;
18+
outline.style.strokeDashoffset = outlineLength;
19+
//pick sounds
20+
sounds.forEach(sound =>{
21+
sound.addEventListener("click", function(){
22+
23+
song.src = this.getAttribute("data-sound");
24+
video.src = this.getAttribute("data-video");
25+
checkPlaying(song);
26+
});
27+
});
28+
29+
30+
//play sound
31+
play.addEventListener("click", ()=>{
32+
checkPlaying(song);
33+
34+
});
35+
//select sound
36+
timeSelect.forEach(option => {
37+
option.addEventListener( "click" , function(){
38+
fakeDuration = this.getAttribute("data-time");
39+
timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(fakeDuration % 60)}`;
40+
});
41+
});
42+
43+
//function stop play sound
44+
const checkPlaying = song =>{
45+
if(song.paused){
46+
song.play();
47+
video.play();
48+
play.src ="./svg/pause.svg"
49+
50+
} else {
51+
song.pause();
52+
video.pause();
53+
play.src = "./svg/play.svg";
54+
}
55+
};
56+
57+
58+
59+
song.ontimeupdate = () =>{
60+
let currentTime = song.currentTime;
61+
let elapsed = fakeDuration - currentTime ;
62+
let seconds = Math.floor(elapsed % 60);
63+
let minutes = Math.floor(elapsed / 60);
64+
65+
//animate circle
66+
let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
67+
outline.style.strokeDashoffset = progress;
68+
//animate text
69+
timeDisplay.textContent = `${minutes}:${seconds}`;
70+
if(currentTime >= fakeDuration){
71+
song.pause();
72+
song.currentTime = 0;
73+
play.src = "./svg/play.svg";
74+
video.pause();
75+
}
76+
};
77+
78+
};
79+
app();

‎Week3/homework/code along/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Meditation App</title>
10+
</head>
11+
<body>
12+
<div class="app">
13+
<div class="vid-container">
14+
<video loop >
15+
<source src="./video/rain.mp4" type="video/mp4">
16+
</video>
17+
</div>
18+
19+
<div class="time-select">
20+
<button data-time ="120">2 Minutes</button>
21+
<button data-time ="300">5 Minutes</button>
22+
<button data-time ="600">10 Minutes</button>
23+
</div>
24+
<div class="player-container">
25+
<audio class="song">
26+
<source src="./sounds/rain.mp3">
27+
</audio>
28+
<img src="./svg/play.svg" alt="play" class="play">
29+
<svg class="track-outline"
30+
width="453"
31+
height="453"
32+
viewBox="0 0 453 453"
33+
fill="none"
34+
xmlns="http://www.w3.org/2000/svg">
35+
<circle
36+
cx="226.5"
37+
cy="226.5"
38+
r="216.5"
39+
stroke="white"
40+
stroke-width="20"/>
41+
</svg>
42+
<svg class="moving-outline"
43+
width="453"
44+
height="453"
45+
viewBox="0 0 453 453"
46+
fill="none"
47+
xmlns="http://www.w3.org/2000/svg">
48+
<circle
49+
cx="226.5"
50+
cy="226.5"
51+
r="216.5"
52+
stroke="#018EBA"
53+
stroke-width="20"/>
54+
</svg>
55+
<h3 class="time-display">0:00</h3>
56+
</div>
57+
<div class="sound-picker">
58+
<button data-sound="./sounds/rain.mp3" data-video="./video/rain.mp4">
59+
<img src="./svg/rain.svg" alt="rain">
60+
</button>
61+
<button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4">
62+
<img src="./svg/beach.svg" alt="beach">
63+
</button>
64+
65+
</div>
66+
</div>
67+
<script src="app.js"></script>
68+
</body>
69+
</html>

‎Week3/homework/code along/sounds/beach.mp3

5.72 MB
Binary file not shown.

‎Week3/homework/code along/sounds/rain.mp3

5.73 MB
Binary file not shown.

‎Week3/homework/code along/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
*{margin:0; padding:0; box-sizing: border-box;}
2+
3+
.app{
4+
height:100vh;
5+
display:flex;
6+
justify-content: space-evenly;
7+
align-items: center;
8+
}
9+
.time-select, .sound-picker, .player-container {
10+
height:80%;
11+
flex:1;
12+
display:flex;
13+
flex-direction: column;
14+
justify-content: space-evenly;
15+
align-items: center;
16+
}
17+
18+
19+
.player-container {
20+
21+
position: relative;
22+
}
23+
.player-container svg {
24+
position: absolute;
25+
height:50%;
26+
top:50%;
27+
left:50%;
28+
transform:translate(-50%, -50%) rotate(-90deg);
29+
pointer-events: none;
30+
}
31+
.time-display{
32+
position: absolute;
33+
bottom:10%;
34+
color:white;
35+
font-size: 50px;
36+
}
37+
38+
video{
39+
position: fixed;
40+
top:0%;
41+
left:0%;
42+
width:100%;
43+
z-index: -10;
44+
45+
}
46+
47+
.time-select button,
48+
.sound-picker button{
49+
color:white;
50+
width:30%;
51+
height:10%;
52+
background:none;
53+
border:2px solid white;
54+
cursor: pointer;
55+
border-radius: 5px;
56+
font-size:20px;
57+
transition: all 0.5s ease;
58+
}
59+
.time-select button:hover{
60+
color: black;
61+
background:white;
62+
}
63+
.sound-picker button{
64+
border:none;
65+
height:120px;
66+
width:120px;
67+
border-radius: 50%;
68+
padding:30px;
69+
70+
}
71+
.sound-picker button:nth-child(1){
72+
background: #4972a1;
73+
}
74+
.sound-picker button:nth-child(2){
75+
background: #a14f49;
76+
}
77+
.sound-picker button img{
78+
height: 100%;
79+
}

‎Week3/homework/code along/svg/beach.svg

Lines changed: 10 additions & 0 deletions
Loading

‎Week3/homework/code along/svg/moving-outline.svg

Lines changed: 3 additions & 0 deletions
Loading

‎Week3/homework/code along/svg/pause.svg

Lines changed: 4 additions & 0 deletions
Loading

‎Week3/homework/code along/svg/play.svg

Lines changed: 3 additions & 0 deletions
Loading

‎Week3/homework/code along/svg/rain.svg

Lines changed: 10 additions & 0 deletions
Loading

‎Week3/homework/code along/svg/replay.svg

Lines changed: 1 addition & 0 deletions
Loading

‎Week3/homework/code along/video/beach.mp4

1.27 MB
Binary file not shown.

‎Week3/homework/code along/video/rain.mp4

1.21 MB
Binary file not shown.

‎Week3/homework/credit-card/creditCardValidator.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
function sigrisi(pass) {
2+
return pass.split('').every(char => char === pass[0]);
3+
//You don't have to go over the complete string if the chars do not match.
4+
//src https://stackoverflow.com/questions/41192854/function-that-checks-whether-all-characters-in-a-string-are-equal-javascript-h
5+
}
6+
7+
function sum(pass) {
8+
let total = 0;
9+
for (i = 0; i < pass.length; i++) {
10+
total += parseInt(pass[i]);
11+
}
12+
return total;
13+
14+
}
15+
16+
function credit(pass) {
17+
let passString = pass.toString();
18+
let a = /^[0-9]+$/;
19+
let minima = "invalid";
20+
let minima2 = "valid";
21+
22+
if (!passString.match(a) || passString.length !== 16) {
23+
console.log(`${minima} Must be 16 digits only numbers`);
24+
} else if (sigrisi(passString) === true) {
25+
console.log(`${minima} Same number`);
26+
27+
} else if (passString.charAt(15) % 2 !== 0) { //charArt function select char in any position you want
28+
console.log(`${minima} Last numb mast be even`);
29+
30+
} else if (sum(passString) <= 16) {
31+
console.log(`${minima} The sum mast be 16`);
32+
33+
} else {
34+
console.log(`${minima2}:Password accepted`)
35+
}
36+
37+
}
38+
//invalid
39+
credit("a92332119c011112");
40+
credit ("4444444444444444");
41+
credit ("1111111111111110" );
42+
credit("6666666666666661");
43+
44+
//valid
45+
credit("1111111111111142");
46+
credit("5555050000000010");

‎Week3/homework/js-exercises/amazing.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use strict';
2+
let giveCompliment = (name) => {
3+
let compliment = ["awesome",
4+
"smart",
5+
"strong",
6+
"funny",
7+
"brave",
8+
"good",
9+
"nice",
10+
"great",
11+
];
12+
let random = compliment[Math.floor(Math.random() * compliment.length)];
13+
console.log(`You are ${random},${name}`);
14+
}
15+
giveCompliment("manwlis");
16+
giveCompliment("manwlis");
17+
giveCompliment("manwlis");

‎Week3/homework/js-exercises/dogYears.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let calculateDogAge = (age) =>{
2+
let dogYears = age * 7;
3+
console.log(`Your doggie is ${dogYears} years old in dog years!`);
4+
5+
}
6+
calculateDogAge(1);
7+
calculateDogAge(2);
8+
calculateDogAge(5);

‎Week3/homework/js-exercises/fortune.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const numChilden = [1, 2, 3, 4];
2+
const partnerNames = ["name1", "name2", "name3", "name4"];
3+
const location = ["location1", "location2", "location3", "location4"];
4+
const jobs = ["job1", "job2", "job3", "job4"];
5+
6+
7+
8+
let tellFortune = (array1, array2, array3, array4) => {
9+
let childern = array1[Math.floor(Math.random() * array1.length)];
10+
let partner = array2[Math.floor(Math.random() * array2.length)];
11+
let place = array3[Math.floor(Math.random() * array3.length)];
12+
let job = array4[Math.floor(Math.random() * array4.length)];
13+
14+
15+
console.log(`You will be a ${job} in ${place}, and married to ${partner} with ${childern} kids.`)
16+
}
17+
tellFortune(numChilden, partnerNames, location, jobs);

‎Week3/homework/js-exercises/shopping.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict';
2+
let addToShoppingCard = (item) => {
3+
shop.push(item);
4+
if (shop.length > 3) {
5+
shop.shift();
6+
7+
}
8+
9+
console.log(`You bought ${shop}!`);
10+
}
11+
let shop = ["bananas", "milk", ];
12+
addToShoppingCard("apple");
13+
addToShoppingCard("beer");
14+
addToShoppingCard("tomatoes");

0 commit comments

Comments
 (0)