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

Skip to content

Commit 5881c70

Browse files
massam89massam89
committed
Meditation App
1 parent 5f215bc commit 5881c70

File tree

14 files changed

+256
-0
lines changed

14 files changed

+256
-0
lines changed

‎Week3/homework/Masoud/meditationApp/app.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
const app = () => {
2+
const song = document.querySelector(".song");
3+
const play = document.querySelector(".play");
4+
const replay = document.querySelector(".replay");
5+
const outline = document.querySelector(".moving-outline circle");
6+
const video = document.querySelector(".vid-container video");
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 buttom');
12+
const outlineLength = outline.getTotalLength();
13+
//Duration
14+
let fakeDuration = 600;
15+
16+
outline.style.strokeDashoffset = outlineLength;
17+
outline.style.strokeDasharray = outlineLength;
18+
19+
play.addEventListener('click', () => {
20+
checkPlaying(song);
21+
})
22+
23+
const restartSong = song =>{
24+
let currentTime = song.currentTime;
25+
song.currentTime = 0;
26+
console.log("ciao")
27+
28+
}
29+
sounds.forEach(sound => {
30+
sound.addEventListener("click", function() {
31+
song.src = this.getAttribute("data-sound");
32+
video.src = this.getAttribute("data-video");
33+
checkPlaying(song);
34+
});
35+
});
36+
37+
timeSelect.forEach(option => {
38+
option.addEventListener("click", function() {
39+
fakeDuration = this.getAttribute("data-time");
40+
timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
41+
fakeDuration % 60
42+
)}`;
43+
});
44+
});
45+
46+
const checkPlaying = song => {
47+
if(song.paused){
48+
song.play();
49+
video.play();
50+
play.src = './svg/pause.svg'
51+
} else {
52+
song.pause();
53+
video.pause()
54+
play.src = './svg/play.svg'
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+
66+
let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
67+
outline.style.strokeDashoffset = progress
68+
69+
timeDisplay.textContent = `${minutes}:${seconds}`;
70+
}
71+
72+
song.ontimeupdate = function() {
73+
let currentTime = song.currentTime;
74+
let elapsed = fakeDuration - currentTime;
75+
let seconds = Math.floor(elapsed % 60);
76+
let minutes = Math.floor(elapsed / 60);
77+
timeDisplay.textContent = `${minutes}:${seconds}`;
78+
let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
79+
outline.style.strokeDashoffset = progress;
80+
81+
if (currentTime >= fakeDuration) {
82+
song.pause();
83+
song.currentTime = 0;
84+
play.src = "./svg/play.svg";
85+
video.pause();
86+
}
87+
};
88+
89+
};
90+
91+
app();
92+

‎Week3/homework/Masoud/meditationApp/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Meditation App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="app">
11+
<div class="vid-container">
12+
<video loop >
13+
<source src="./video/rain.mp4" type="video/mp4">
14+
</video>
15+
</div>
16+
17+
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" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
30+
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
31+
</svg>
32+
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
33+
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
34+
</svg>
35+
<h3 class="time-display">0:00</h3>
36+
37+
</div>
38+
<div class="sound-picker">
39+
<button data-sound="./sounds/rain.mp3" data-video="./video/rain.mp4"><img src="./svg/rain.svg" alt="rain"></button>
40+
<button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4"><img src="./svg/beach.svg" alt="rain"></button>
41+
</div>
42+
</div>
43+
44+
<script src="app.js"></script>
45+
</body>
46+
</html>

‎Week3/homework/Masoud/meditationApp/sounds/beach.mp3

5.72 MB
Binary file not shown.

‎Week3/homework/Masoud/meditationApp/sounds/rain.mp3

5.73 MB
Binary file not shown.

‎Week3/homework/Masoud/meditationApp/style.css

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

‎Week3/homework/Masoud/meditationApp/svg/beach.svg

Lines changed: 10 additions & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/svg/moving-outline.svg

Lines changed: 3 additions & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/svg/pause.svg

Lines changed: 4 additions & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/svg/play.svg

Lines changed: 3 additions & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/svg/rain.svg

Lines changed: 10 additions & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/svg/replay.svg

Lines changed: 1 addition & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/svg/track-outline.svg

Lines changed: 3 additions & 0 deletions
Loading

‎Week3/homework/Masoud/meditationApp/video/beach.mp4

1.27 MB
Binary file not shown.

‎Week3/homework/Masoud/meditationApp/video/rain.mp4

1.21 MB
Binary file not shown.

0 commit comments

Comments
 (0)