Build A Meditation App With Javascript HTML & CSS | Meditation App







Build A Meditation App With Javascript HTML & CSS | Meditation App 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the meditation timer. We use HTML, Css, and javascript for this meditation timer. I hope you enjoy our blog so let’s start with a basic HTML structure for the meditation timer.

HTML Code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Meditation App</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="app">
<div class="vid-container">
<video loop>
<source src="./video/rain.mp4" type="video/mp4">
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="./sounds/rain.mp3"/>
</audio>
<img src="./svg/play.svg" alt="play" class="play">
<svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="./sounds/rain.mp3" data-video="./video/rain.mp4">
<img src="./svg/rain.svg" alt="rain">
</button>
<button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4">
<img src="./svg/beach.svg" alt="beach">
</button>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>

There is all the HTML code & Css code for the meditation timer. Now, you can see an output with CSS, then we write javascript for the meditation timer.

output

Build A Meditation App With Javascript HTML & CSS | Meditation App

Build A Meditation App With Javascript HTML & CSS | Meditation App

CSS code

 * {  
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%;
transform: rotate(-90deg);
pointer-events: none;
}
.time-display {
position: absolute;
bottom: 10%;
font-size: 50px;
color: white;
}
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: #497281;
}
.sound-picker button:nth-child(2) {
background: #a14f49;
}
.sound-picker button img {
height: 100%;
}
.time-select button:focus,
.sound-picker button:focus {
outline: 0;
}

Css Updated output

Build A Meditation App With Javascript HTML & CSS | Meditation App

Javascript code 

 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);
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//Pick diff sound
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)}`;
});
});
//Create a function specific to stop and play the sounds
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';
}
};
//We can animate the circle
song.ontimeupdate = () => {
let currentTime = song.currentTime;
let elasped = fakeDuration - currentTime;
let seconds = Math.floor(elasped % 60);
let minutes = Math.floor(elasped / 60);
console.log(currentTime);
//Animate the circle
let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
outline.style.strokeDashoffset = progress;
//Animate the text
timeDisplay.textContent = `${minutes}:${seconds}`;
if (currentTime >= fakeDuration) {
song.pause();
song.currentTime = 0;
play.src = './svg/play.svg';
video.pause();
}
}
};
app();

Final output

Build A Meditation App With Javascript HTML & CSS | Meditation App

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the meditation timer. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
Share on:

0 thoughts on “Build A Meditation App With Javascript HTML & CSS | Meditation App”

Leave a Comment