Skip to content

Commit 1fa4154

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

19 files changed

Lines changed: 387 additions & 0 deletions

File tree

‎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

0 commit comments

Comments
 (0)