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

Skip to content

Commit ebec922

Browse files
Stef-LevStef-Lev
committed
meditation app finished
1 parent 97ef941 commit ebec922

21 files changed

+238
-202
lines changed

‎Week3/Homework/codeAlong/meditation-app/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# meditation-app
2+
Meditation app tutorial

‎Week3/Homework/codeAlong/meditation-app/app.js

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

‎Week3/Homework/codeAlong/meditation-app/img/fa-cloud-rain-solid.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Week3/Homework/codeAlong/meditation-app/img/fa-pause-solid.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Week3/Homework/codeAlong/meditation-app/img/fa-play-solid.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Week3/Homework/codeAlong/meditation-app/img/fa-sun-solid.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Week3/Homework/codeAlong/meditation-app/index.html

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,51 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
5-
6-
<meta charset="utf-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8-
9-
<link rel="stylesheet" href="style.css">
10-
11-
<title>Meditation App</title>
12-
<script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
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 href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
9+
<link rel="stylesheet" href="./style.css" />
10+
<title>Meditation App</title>
1311
</head>
1412

1513
<body>
16-
<div class="app">
17-
18-
<div class="vid-container">
19-
<video loop>
20-
<source src="vid/rain.mp4" type="video/mp4">
21-
</video>
22-
</div>
23-
24-
<div class="time-select">
25-
<button data-time="300">5 minutes</button>
26-
<button data-time="600">10 minutes</button>
27-
<button data-time="900">15 minutes</button>
28-
</div>
29-
<div class="player-container">
30-
<audio class="song">
31-
<source src="sounds/rain.mp3">
32-
</audio>
33-
<img src="img/play.svg" alt="play" class="play">
34-
<svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
35-
xmlns="http://www.w3.org/2000/svg">
36-
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20" />
37-
</svg>
38-
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
39-
xmlns="http://www.w3.org/2000/svg">
40-
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20" />
41-
</svg>
42-
<h3 class="time-display">0:00</h3>
43-
</div>
44-
<div class="sound-picker">
45-
<button data-sound="sounds/rain.mp3" data-video="vid/rain.mp4"><img src="img/rain.svg" alt="rain"></button>
46-
<button data-sound="sounds/beach.mp3" data-video="vid/beach.mp4"><img src="img/beach.svg"
47-
alt="beach"></button>
48-
</div>
14+
<div class="app">
15+
<div class="vid-container">
16+
<video loop>
17+
<source src="./video/rain.mp4" type="video/mp4">
18+
</video>
4919
</div>
20+
<div class="time-select">
21+
<button data-time="10">10 seconds</button>
22+
<button data-time="300" class="medium-mins">5 minutes</button>
23+
<button data-time="600" class="long-mins">10 minutes</button>
24+
</div>
25+
<div class="player-container">
26+
<audio class="song">
27+
<source src="./sounds/rain.mp3" />
28+
</audio>
29+
<img src="./svg/play.svg" class="play"></img>
30+
<svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
31+
xmlns="http://www.w3.org/2000/svg">
32+
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20" />
33+
</svg>
34+
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
35+
xmlns="http://www.w3.org/2000/svg">
36+
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20" />
37+
</svg>
38+
<img src="./svg/replay.svg" class="replay"></img>
39+
40+
<h3 class="time-display">0:00</h3>
41+
</div>
42+
<div class="sound-picker">
43+
<button data-sound="./sounds/rain.mp3" data-video="./video/rain.mp4"><img src="./svg/rain.svg" alt=""></button>
44+
<button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4"><img src="./svg/beach.svg" alt=""></button>
45+
</div>
46+
</div>
5047

51-
52-
<script src="script.js"></script>
48+
<script src="app.js"></script>
5349
</body>
5450

5551
</html>

‎Week3/Homework/codeAlong/meditation-app/script.js

Lines changed: 0 additions & 85 deletions
This file was deleted.

0 commit comments

Comments
 (0)