I can’t find my mistake to get the 2 minute / 5 minute buttons to work. I was able to locate several mistakes but when I went to test nothing changed. I’m not getting any errors so I’m having some trouble and thought someone would be able to assist.
The issue I assume is around line 10-33 of the Javascript. However, I’m including all 3 (html, js, css) for testing purposes.
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 = h3 - html
const timeDisplay = document.querySelector('.time-display');
const timeselect = document.querySelectorAll('.time-select button');
//Get the length of the outline
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//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
)}`;
});
});
// A function 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';
}
};
// Animate the circle
song.ontimeupdate = () => {
let currentTime = song.currentTime;
let elapsed = fakeDuration - currentTime;
let seconds = Math.floor(elapsed % 60);
let minutes = Math.floor(elapsed / 60);
//Animate the circle
let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
outline.style.strokeDashoffset = progress;
//Animate the text
timeDisplay.textContent = `${minutes}:${seconds}`;
};
};
app();* {
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%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.time-display {
position: absolute;
bottom: 10%;
color: white;
font-size: 50px;
}
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;
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;
padding: 30px;
}
.sound-picker button:nth-child(1) {
background: #4972a1
}
.sound-picker button:nth-child(2) {
background: #a14f49;
}
.sound-picker button img {
height: 100%;
}<!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"></link>
<title> Meditation App </title>
</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>As always any and all assistance is appreciated.
Left mouse click on both the 2 and 5 minute countdown don’t work. I tried both before and after clicking play button. Located several "issues" but none that affected the code from running/ gave the expected desire with the 2/5 minute buttons.
>Solution :
you have error here
fakeDuration = this.getattribute("data-time");
you should make ‘a’ capital letter, like this:
fakeDuration = this.getAttribute("data-time");