Develop Reference

How can I toggle back and forth to Two Different CountDown Timer using JS

I hope you are doing great. I want to toggle back and forth b/w "Time left to my birthday" Countdown Timer and "Time left to my New Year" Count down timer using onclick button method. The code works perfectly fine. All I need is when I click on the button "Time left to my birthday" the timer should be changed and vice versa. Is there any way that I can achieve this functionality?. Your help is always appreciated. Here is my code
const newYears = "18 Aug 2022";
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");
function countdown() {
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formate(hours);
minsEl.innerHTML = formate(minutes);
secsEl.innerHTML = formate(seconds);
}
function formate(time) {
if (time < 10) {
return (`0${time}`);
} else {
return time
}
}
countdown()
setInterval(countdown, 1000)
* {
box-sizing: border-box;
text-transform: capitalize;
}
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-weight: normal;
font-size: 2.5rem;
margin-top: -8rem;
}
.countdown-container {
display: flex;
}
.big-text {
font-weight: bold;
font-size: 4rem;
line-height: 1;
margin: 0 1.5rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 0.8rem;
}
.button {
top: 2rem;
display: inline-block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
background: linear-gradient(#4d4d4d, #2f2f2f);
border-radius: 5px;
border: 1px solid black;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
color: white !important;
font-size: 1.2em;
cursor: pointer;
/* Important part */
position: relative;
transition: padding-right 0.3s ease-out;
}
<h1>Time left To My next Birthday </h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="minutes">0</p>
<span>minutes</span>
</div>
<div class="countdown-el sec-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<button class="button" onclick="">Time left to new year</button>

For that you could use an additional var for the toggle state (here birthday) and one for the processed_date and assign the date (birthday or next year) to it:
const nextBirthday = "18 Aug 2022";
const newYear = "01 Jan 2022";
let birthday = true;
let processed_date = nextBirthday;
...
function countdown() {
const newYearsDate = new Date(processed_date);
...
}
In the event handler you only need to toggle processed_date and the textContent of the heading and the button depending on the toggle state and invert the toggle state after that:
toggle_button.addEventListener('click', function() {
processed_date = birthday ? newYear : nextBirthday;
heading.querySelector('span').textContent = birthday ? 'new year' : 'my next birthday';
toggle_button.querySelector('span').textContent = birthday ? 'my birthday' : 'new year';
birthday = !birthday;
});
Working example: (smaller and without negative margin for demonstration)
const nextBirthday = "18 Aug 2022";
const newYear = "01 Jan 2022";
let processed_date = nextBirthday;
let birthday = true;
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");
const heading = document.querySelector('h1');
const toggle_button = document.querySelector("button");
function countdown() {
const newYearsDate = new Date(processed_date);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formate(hours);
minsEl.innerHTML = formate(minutes);
secsEl.innerHTML = formate(seconds);
}
function formate(time) {
if (time < 10) {
return (`0${time}`);
} else {
return time
}
}
toggle_button.addEventListener('click', function() {
processed_date = birthday ? newYear : nextBirthday;
heading.querySelector('span').textContent = birthday ? 'new year' : 'my next birthday';
toggle_button.querySelector('span').textContent = birthday ? 'my next birthday' : 'new year';
birthday = !birthday;
countdown(); //not necessary - only for imidiate change instead of waiting 1 second
});
countdown();
setInterval(countdown, 1000);
* {
box-sizing: border-box;
text-transform: capitalize;
font-size: 10px;
}
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-weight: normal;
font-size: 2.5rem;
}
.countdown-container {
display: flex;
}
.big-text {
font-weight: bold;
font-size: 4rem;
line-height: 1;
margin: 0 1.5rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 0.8rem;
}
.button {
top: 2rem;
display: inline-block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
background: linear-gradient(#4d4d4d, #2f2f2f);
border-radius: 5px;
border: 1px solid black;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
color: white !important;
font-size: 1.2em;
cursor: pointer;
/* Important part */
position: relative;
transition: padding-right 0.3s ease-out;
}
span {
font-size: inherit;
}
<h1>Time left To <span>My next Birthday</span></h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="minutes">0</p>
<span>minutes</span>
</div>
<div class="countdown-el sec-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<button class="button">Time left to <span>new year</span></button>

I can't convert .duration or .currentTime to MM:SS in java script

since I don't know JavaScript I downloaded an audio player and changed the html and CSS but the audio player shows audio duration in seconds and; I tried to look for results in google but that did not work as well, I even tried to copy code from other audio players but it did not work. I would be happy if anyone help me.
thanks...
$(document).ready(function() {
var timeDrag = false; /* Drag status */
var isPlaying = false;
var theSound = $("#firstTrack");
var allIcons = $("i");
var isLoaded = false;
theSound.on("timeupdate", function() {
var currentPos = theSound[0].currentTime; //Get currenttime
var maxduration = theSound[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage + '%');
$("#getTime").html(Math.floor(theSound[0].duration));
$('#goTime').html(Math.floor(theSound[0].currentTime));
});
$("#playIt").click(function(event) {
// run once.
if (!isLoaded) {
theSound.trigger('load');
setTimeout(startBuffer, 500);
isLoaded = true;
}
// toggle play/pause
if (!isPlaying) {
theSound.trigger('play');
$("#playIt").find(allIcons).removeClass("fa-play");
$("#playIt").find(allIcons).addClass("fa-pause");
isPlaying = true;
} else {
theSound.trigger('pause');
$("#playIt").find(allIcons).removeClass("fa-pause");
$("#playIt").find(allIcons).addClass("fa-play");
isPlaying = false;
}
});
$("#stepFive").click(function() {
var currentPos = theSound[0].currentTime + 5;
theSound[0].currentTime = currentPos;
});
$("#stepFiveback").click(function() {
var currentPos = theSound[0].currentTime - 5;
theSound[0].currentTime = currentPos;
});
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if (timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if (timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) {
var progress = $('.progressBar');
var maxduration = theSound[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
$('.timeBar').css('width', percentage + '%');
theSound[0].currentTime = maxduration * percentage / 100;
};
//loop to get HTML5 video buffered data
var startBuffer = function() {
var maxduration = $("#firstTrack")[0].duration;
var currentBuffer = $("#firstTrack")[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage + '%');
//re-loop if not entierely buffered
if (currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
});
#charset "utf-8";
/*head*/
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #1e1f1f;
max-height: 100vh;
/* change here */
}
/* -- */
.noPad {
padding: 0;
}
.playBar {
transition: all 0.5s ease;
height: 10px;
background-color: rgba(186, 44, 44, 0.59);
/*border: 1.5px;*/
/*border-color: black;*/
/*border-style: inset;*/
opacity: 0.85;
width: 0;
}
#audioCtrl>div {
margin: 0;
padding: 0;
}
.progressBar {
position: relative;
width: 100%;
height: .4em;
backgroud-color: #474848;
color: #474848;
scroll-behavior: smooth;
border: solid;
border-color: #474848;
border-width: 1px;
border-radius: 5px;
}
.timeBar {
transition: all 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #8c8d8e;
border-radius: 5px;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #474949;
opacity: 0.5;
border-radius: 5px;
}
/* -- */
.row {
/* background-color: #535252; */
border-radius: 10px;
}
.img-container img {
margin-top: 10em;
border-radius: 15px;
height: 22em;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
}
.info1 {}
.title {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 1.7em;
margin: 0;
padding-bottom: .4em;
margin-left: .2em;
color: #f1f1f1;
}
.time-btn {
float: right;
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-right: .3em;
}
.time-btn2 {
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-left: .2em;
}
.btn {
background-color: #1e1f1f;
color: #D7D7D7;
border: 0;
font-size: 2.2em;
padding: .3em .7em;
}
.btn-big {
color: #FFFFFF;
font-size: 2.4em;
}
.btn:focus {
border: 0;
}
.scrollformore {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 1em;
margin-top: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>audio_player_2</title>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/aistyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="simple_player.js"></script>
<div class="container-fluid"><audio id="firstTrack" width="100%" preload="none">
<source src="https://www.bensound.com/bensound-music/bensound-ukulele.mp3" type="audio/mpeg" />
</audio>
<div class="img-container"><img src="https://www.bensound.com/bensound-img/ukulele.jpg" alt="cover"></div>
<h2 class="title info1">Ukulele</h2>
<div class="row" id="audioCtrl">
<div class="col-xs-3 progressBar">
<div class="bufferBar"></div>
<div class="timeBar"></div>
</div>
<div class="col-xs-3"><button class="time-btn info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="getTime"><div class="durationTime">00</div></span></i></button></div>
<div class="col-xs-3"><button class="time-btn2 info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="goTime"><div class="currentTime">00</div></span></i></button></div>
<div class="navigation">
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFiveback" type="button"> <i class="fa fa-backward"> <span class="hidden-xs"></span></i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb btn-big" id="playIt" type="button"> <i class="fa fa-play"> </i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFive" type="button"> <i class="fa fa-forward"> <span class="hidden-xs"></span></i></button></div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/simple_player.js"></script>
</body>
</html>
strong text

You will want to add a function to help convert all the Seconds to Minutes and Seconds.
Consider the following Example.
function convertSeconds(sec) {
var m = Math.floor(sec / 60);
var s = sec % 60;
return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}
This get the calculated Minutes and Seconds from a total number of Seconds using Division and Modulus. It may look like this in use:
$(document).ready(function() {
var timeDrag = false; /* Drag status */
var isPlaying = false;
var theSound = $("#firstTrack");
var allIcons = $("i");
var isLoaded = false;
function convertSeconds(sec) {
var m = Math.floor(sec / 60);
var s = sec % 60;
return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}
theSound.on("timeupdate", function() {
var currentPos = theSound[0].currentTime; //Get currenttime
var maxduration = theSound[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage + '%');
$("#getTime").html(convertSeconds(Math.floor(theSound[0].duration)));
$('#goTime').html(convertSeconds(Math.floor(theSound[0].currentTime)));
});
$("#playIt").click(function(event) {
if (!isLoaded) {
theSound.trigger('load');
setTimeout(startBuffer, 500);
isLoaded = true;
}
if (!isPlaying) {
theSound.trigger('play');
$("#playIt").find(allIcons).removeClass("fa-play");
$("#playIt").find(allIcons).addClass("fa-pause");
isPlaying = true;
} else {
theSound.trigger('pause');
$("#playIt").find(allIcons).removeClass("fa-pause");
$("#playIt").find(allIcons).addClass("fa-play");
isPlaying = false;
}
});
$("#stepFive").click(function() {
var currentPos = theSound[0].currentTime + 5;
theSound[0].currentTime = currentPos;
});
$("#stepFiveback").click(function() {
var currentPos = theSound[0].currentTime - 5;
theSound[0].currentTime = currentPos;
});
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if (timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if (timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) {
var progress = $('.progressBar');
var maxduration = theSound[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
$('.timeBar').css('width', percentage + '%');
theSound[0].currentTime = maxduration * percentage / 100;
};
//loop to get HTML5 video buffered data
var startBuffer = function() {
var maxduration = $("#firstTrack")[0].duration;
var currentBuffer = $("#firstTrack")[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage + '%');
//re-loop if not entierely buffered
if (currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
});
#charset "utf-8";
/*head*/
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #1e1f1f;
max-height: 100vh;
/* change here */
}
/* -- */
.noPad {
padding: 0;
}
.playBar {
transition: all 0.5s ease;
height: 10px;
background-color: rgba(186, 44, 44, 0.59);
/*border: 1.5px;*/
/*border-color: black;*/
/*border-style: inset;*/
opacity: 0.85;
width: 0;
}
#audioCtrl>div {
margin: 0;
padding: 0;
}
.progressBar {
position: relative;
width: 100%;
height: .4em;
backgroud-color: #474848;
color: #474848;
scroll-behavior: smooth;
border: solid;
border-color: #474848;
border-width: 1px;
border-radius: 5px;
}
.timeBar {
transition: all 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #8c8d8e;
border-radius: 5px;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #474949;
opacity: 0.5;
border-radius: 5px;
}
/* -- */
.row {
/* background-color: #535252; */
border-radius: 10px;
}
.img-container img {
margin-top: 10em;
border-radius: 15px;
height: 22em;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
}
.info1 {}
.title {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 1.7em;
margin: 0;
padding-bottom: .4em;
margin-left: .2em;
color: #f1f1f1;
}
.time-btn {
float: right;
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-right: .3em;
}
.time-btn2 {
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-left: .2em;
}
.btn {
background-color: #1e1f1f;
color: #D7D7D7;
border: 0;
font-size: 2.2em;
padding: .3em .7em;
}
.btn-big {
color: #FFFFFF;
font-size: 2.4em;
}
.btn:focus {
border: 0;
}
.scrollformore {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 1em;
margin-top: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
<div class="container-fluid">
<audio id="firstTrack" width="100%" preload="none">
<source src="https://www.bensound.com/bensound-music/bensound-ukulele.mp3" type="audio/mpeg" />
</audio>
<div class="img-container"><img src="https://www.bensound.com/bensound-img/ukulele.jpg" alt="cover"></div>
<h2 class="title info1">Ukulele</h2>
<div class="row" id="audioCtrl">
<div class="col-xs-3 progressBar">
<div class="bufferBar"></div>
<div class="timeBar"></div>
</div>
<div class="col-xs-3"><button class="time-btn info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="getTime"><div class="durationTime">00:00</div></span></i></button></div>
<div class="col-xs-3"><button class="time-btn2 info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="goTime"><div class="currentTime">00:00</div></span></i></button></div>
<div class="navigation">
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFiveback" type="button"> <i class="fa fa-backward"> <span class="hidden-xs"></span></i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb btn-big" id="playIt" type="button"> <i class="fa fa-play"> </i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFive" type="button"> <i class="fa fa-forward"> <span class="hidden-xs"></span></i></button></div>
</div>
</div>
</div>
</div>

Try this:
export function timeFormat(d: number) {
const duration = Math.floor(d);
const h = Math.floor(duration / 3600);
const m = Math.floor((duration - h * 3600) / 60);
const s = duration % 60;
const H = h === 0 ? '' : `${h}:`;
const M = m < 10 ? `0${m}:` : `${m}:`;
const S = s < 10 ? `0${s}` : `${s}`;
return H + M + S;
}

How can I get href URL with countdown?

I've created a button with 10 seconds timer but that is happening with onclick function. I know I shouldn't use onclick function in element. But Is there any way to get href URL It mean when I click on button It should start countdown and after countdown completion it should get URL from href and redirect. If you want to check you can visit here https://mamutemplates.blogspot.com/
var l = 0; function myFunction2(url1) {var tt1 = setInterval(function() {
l = l + 1; var counter = 10 - l;
button2.innerHTML = 'You will be redirected After:' + counter;
if (counter === 0) { clearInterval(tt1); window.location = url1; }
}, 1000);}; var i = 0;
function myFunction(url) { var tt = setInterval(function() {
i = i + 1; var counter = 10 - i;
button1.innerHTML = 'You will be redirected After' + counter;
if (counter === 0) { clearInterval(tt); window.location = url; }
}, 1000);};
#button2{padding: 10px;
border:3px solid #eee;
background: #27ae60;
border-radius: 15px;
width: 120px;
cursor: pointer;
}
#download2{text-decoration: none;
font-size: 18px;text-align: center;
color:#ffffff; }
#button1{
text-decoration: none;
padding: 10px;
border:3px solid #eee;
background:#2573a6;
border-radius: 15px;
width: 120px;
cursor: pointer;
}#download1{
text-decoration: none;
font-size: 18px;
text-align: center;
color:#ffffff;
}
<div class="pr3" id="second">
<button id="button1">
Download
</button>
<button id="button2">
DEMO
</button><br />

what you need is element.getAttribute("href"):https://www.javascripttutorial.net/javascript-dom/javascript-getattribute/

btn.onclick = function() {
var timer = setInterval(timerCount, 1000)
var t = 10;
function timerCount() {
t--;
if (t < 0) {
console.log("times up");
window.location.href = url
clearInterval(timer)
} else {
console.log(t)
}
}
}
I think you will be able to figure the rest of it if you want:-)

If you really need to use the href attribute on your buttons, then implementation goes as follows:
document.getElementById("button2").addEventListener("click", demoHandler);
var l = 0;
function demoHandler(event) {
let url = event.target.getAttribute('href');
var tt1 = setInterval(function() {
l = l + 1;
var counter = 10 - l;
button2.innerHTML = 'You will be redirected After:' + counter;
if (counter === 0) {
clearInterval(tt1);
window.location = url;
}
}, 1000);
};
var i = 0;
function myFunction(url) {
var tt = setInterval(function() {
i = i + 1;
var counter = 10 - i;
button1.innerHTML = 'You will be redirected After' + counter;
if (counter === 0) {
clearInterval(tt);
window.location = url;
}
}, 1000);
};
#button2 {
padding: 10px;
border: 3px solid #eee;
background: #27ae60;
border-radius: 15px;
width: 120px;
cursor: pointer;
}
#download2 {
text-decoration: none;
font-size: 18px;
text-align: center;
color: #ffffff;
}
#button1 {
text-decoration: none;
padding: 10px;
border: 3px solid #eee;
background: #2573a6;
border-radius: 15px;
width: 120px;
cursor: pointer;
}
#download1 {
text-decoration: none;
font-size: 18px;
text-align: center;
color: #ffffff;
}
<div class="pr3" id="second">
<button id="button1">
Download
</button>
<button id="button2" href="https://www.stackoverflow.com.">DEMO</a>
</button><br />

Time does not display when you start the timer

My timer does not show when I input a certain time, and I have checked several times what the issue could be but have no errors. I am not sure if it is related to the javascript code.
Everything else works perfectly fine, e.g. the buttons for submit, continue and stop.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>CountDown</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
This is the javascript code:
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('.seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit(){
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e){
document.getElementById(e).style.display = 'block';
}
function remove(e){
document.getElementById(e).style.display = 'none';
}
function check(stat){
toCount = this.value;
if(stat.id == "start"){
display("stop");
remove("start");
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
}
else{
display("stop");
remove("continue");
}
}
function count(){
if(seconds > 0){
if(toCount == true){
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(minuts < 10){
minuts = "0" + minuts;
}
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
}
else{
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting(){
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
This is the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html, body{
height: 100%;
}
body{
width: 100%;
height: 100%;
background: linear-gradient(to left top, #0045D6, #00A9f6);
}
header{
width: 100%;
height: 13vh;
background-color: #fff;
color: #0045F6;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
height: 60vh;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content #seconds{
width: 250px;
font-size: 2rem;
padding: 1rem;
outline: none;
background: none;
border: none;
border-bottom: 3px solid #fff;
color: #fff;
}
#seconds::placeholder{
color: #ddd;
font-size: 1.7rem;
}
.btn{
background-color: #fff;
border-radius: 4px;
border: none;
outline: none;
cursor: pointer;
padding: 0.8rem 1.7rem;
font-size: 1.2rem;
font-weight: 700;
}
.start{
color: #1f0;
}
.stop{
color: #E00;
}
#start, #stop, #continue{
display: none;
}
.counter{
color: #fff;
}

Your selector is wrong: const secInput = document.getElementById('.seconds'); use . for classes. change this line as following: const secInput = document.getElementById('seconds');
After Edit:
Ok. take a look at following snippet:
usage of toCount variable was incorrect.
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit(){
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e){
document.getElementById(e).style.display = 'block';
}
function remove(e){
document.getElementById(e).style.display = 'none';
}
function check(stat){
if(stat.id == "start"){
display("stop");
remove("start");
toCount = true;
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
toCount = false;
}
else{
display("stop");
remove("continue");
toCount =true;
}
}
function count(){
if(seconds > 0){
if(toCount == true){
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(minuts < 10){
minuts = "0" + minuts;
}
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
}
else{
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting(){
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html, body{
height: 100%;
}
body{
width: 100%;
height: 100%;
background: linear-gradient(to left top, #0045D6, #00A9f6);
}
header{
width: 100%;
height: 13vh;
background-color: #fff;
color: #0045F6;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
height: 60vh;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content #seconds{
width: 250px;
font-size: 2rem;
padding: 1rem;
outline: none;
background: none;
border: none;
border-bottom: 3px solid #fff;
color: #fff;
}
#seconds::placeholder{
color: #ddd;
font-size: 1.7rem;
}
.btn{
background-color: #fff;
border-radius: 4px;
border: none;
outline: none;
cursor: pointer;
padding: 0.8rem 1.7rem;
font-size: 1.2rem;
font-weight: 700;
}
.start{
color: #1f0;
}
.stop{
color: #E00;
}
#start, #stop, #continue{
display: none;
}
.counter{
color: #fff;
}
<head>
<title>CountDown</title>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
</body>

Here is a fix which should make your code work
function check(stat){
seconds = Number(document.getElementById('seconds').value);
if(stat.id == "start"){
display("stop");
remove("start");
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
}
else{
display("stop");
remove("continue");
}
counting();
}
you should be reading value inside check
Also when you are using getElementById do not use (.seconds)
It would be document.getElementById('seconds')
Call counting inside the check function to start counting
In counting function make the toCount flag = true
Make the toCount flag = false when 'DONE'

You only need to update a few things:
function check(stat){
toCount = stat.value;
// not this.value
const secInput = document.getElementById('seconds');
// not const secInput = document.getElementById('.seconds');
This is enough to make it work.
Tip: if you are not sure what the value of a variable is during execution, you can try a console.log. In Firefox, Chrome you can go to developer tools - inspector, tab console to view the result.
This is wat I did:
function check(stat){
toCount = this.value;
console.log(toCount);
This showed me that toCount was undefined, not the value I expected and made me clear that "this" is not valid here, it's about the passed object "stat".

listener for h3 tags do not work

I have a pomodoro clock and I'm having problems with listeners for minBreak and plusBreak respectively. the plusWork minWork jquery listener work just fine, but for some reason the listeners for minBreak and plusBreak do not work. Could someone tell me why? here's the code (don't mind the design too much.. is not finished)
$(document).ready(function() {
//variables
var workTime = 2; //working time
var breakTime = 10; //break time
var seconds = 00;
var minutes = workTime; //setting clock = to workTime
var clockDisplay = document.getElementById("display");
var counterId = 0;
var state = "on";
//start clock whenc button clicked
$("#start").click(function() {
console.log("started!");
setInterval(countDown, 1000);
$(this).hide(); //hide start button
$("#stop").show(); //show stop button
});
//stop clock when stop clicked
$("#stop").click(function() {
console.log("stopped!");
state = "off";
minutes = workTime;
seconds = 0;
clockDisplay.innerHTML = workTime + ":00";
$(this).hide(); //hiding stop
$("#start").show(); //showing start
});
//add work time
$('.plusWork').click(function() {
workTime++;
$('.work').text(workTime);
console.log(workTime);
});
//substract work time
$('.minWork').click(function() {
workTime--;
$('.work').text(workTime);
console.log(workTime);
});
//add break time
$('.plusBreak').click(function() {
breakTime++;
$('.break').text(breakTime);
console.log(breakTime);
});
//substract break time
$('.minBreak').click(function() {
breakTime--;
$('.break').text(breakTime);
console.log(breakTime);
});
//countdown function
function countDown() {
//if workTime = 0 reset counter and stop
if (minutes == 0 || state == 'off') {
clearTimeout(counterId);
return;
}
//when seconds < 0 substract a minute
else if (seconds < 0) {
minutes--;
seconds = 59;
clockDisplay.innerHTML = minutes + ":" + seconds;
} else {
//if second single digit add 0
if (seconds < 10) seconds = "0" + seconds;
clockDisplay.innerHTML = minutes + ":" + seconds;
seconds--;
}
}
});
body {
background-color: #22313f;
;
}
.title {
margin: auto;
text-align: center;
font-size: 30px;
}
.container {
text-align: center;
}
h2 {
font-size: 50px;
margin: 0 0 0 0;
}
.clockContainer {
position: relative;
text-align: center;
}
#display {}
/* .timer {
margin: 0 50px;
margin-top: 70px;
text-align: center;
border: solid black 1px;
font-size: 44px;
width: 500px;
height: 200px;
display: inline-block;
} */
.controlContainer {
position: absolute;
text-align: center;
width: 100px;
display: inline-block;
}
.control {
width: 100px;
height: 100px;
border-radius: 100px;
border: solid black 1px;
text-align: center;
margin-bottom: 20px;
}
.button {
margin-top: 30px;
}
.hide {
display: none;
}
.time {
margin-top: 5px;
margin-bottom: 5px;
font-size: 20px;
}
.ticker {
display: inline-block;
font-size: 30px;
margin-top: 0px;
}
.minus {
margin-right: 10px;
}
.plus {
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<!-- header title -->
<div class="title primary-text">
<h1>Pomodoro Clock</h1>
</div>
<!-- clock container -->
<div class="clockContainer">
<h2>Session</h2>
<!-- timer / clock -->
<div class="timer">
<h1 id="display">30:00</h1>
</div>
<!-- this section for controlling clock -->
<div class="controlContainer">
<div class="control">
<div id="start" class="button title">Start</div>
<div id="stop" class="button hide title">Stop</div>
</div>
<div class="control">
<h3 class="time work">30</h3>
<h3 class="title">Work</h3>
<h3 class="minWork ticker minus">-</h3>
<h3 class="plusWork ticker plus">+</h3>
</div>
<div class="control">
<h3 class="time break">10</h3>
<h3 class="title">Break</h3>
<h3 class="minBrake ticker minus">-</h3>
<h3 class="plusBrake ticker plus">+</h3>
</div>
</div>
</div>
</div>

You have typo in h3 class:
<h3 class="minBrake ticker minus">-</h3>
<h3 class="plusBrake ticker plus">+</h3>
Should be:
<h3 class="minBreak ticker minus">-</h3>
<h3 class="plusBreak ticker plus">+</h3>