We Keep Coding

JavaScript Local Storage Second Counter

my question is the following: Is it possible to create a second counter using local storage? I mean you load the page, the counter starts counting from 1 one by one. You reload the page at 5seconds, and the counter won't resets but continues the counting from 5. Is it possible?
I have a code with a simple sec counter, but I don't know how to make it workable with Local Storage
var seconds = 0;
var el = document.getElementById('seconds-counter');
function incrementSeconds() {
seconds += 1;
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
<div id='seconds-counter'> </div>

this way ?
<div id="seconds-counter">_</div>
<!-- button id="bt-stop-counter"> stop counter </button -->
const
counterLimit = 5 // <-- your counter limit value....
, div_s_counter = document.querySelector('#seconds-counter')
, btStopCounter = document.querySelector('#bt-stop-counter')
, timeRef_ls = localStorage.getItem('counterVal') || 0
, timeRef = (new Date()) - (timeRef_ls * 1000)
, CounterIntv = setInterval(() =>
{
let seconds = Math.floor(((new Date()) - timeRef) / 1000)
if (seconds >= counterLimit ) // stopCounter()
{
div_s_counter.textContent = seconds = counterLimit
clearInterval( CounterIntv )
}
div_s_counter.textContent = seconds
localStorage.setItem('counterVal', seconds.toString(10))
}
, 500)
;
div_s_counter.textContent = timeRef_ls
/* disable counter reset ------------------------------------
{
clearInterval( CounterIntv ) // to stop the counter
localStorage.removeItem('counterVal') // remove the counter
}
btStopCounter.onclick = stopCounter
------------------------------------------------------------*/

var el = document.getElementById('seconds-counter');
function incrementSeconds() {
var counter = window.localStorage.getItem("counter") ?? 0;
window.localStorage.setItem("counter", ++counter);
el.innerText = counter;
}
var cancel = setInterval(incrementSeconds, 1000);

How to stop the time from running after pressing "stop" on stopwatch

I have created this stopwatch and it runs pretty well. The only problem that I am having is that whenever I click my "stop" button, the time stops on the screen but it is still running in the background.
Is there any way to stop this from happening? I want the timer to stop on its current time, then when I click "start", it resumes from the time it was stopped on.
Im thinking maybe create a "new Date()" variable before the update function and another "new Date()" variable inside of the update function and somehow subtract those to get the current date. But I cannot figure that out either.
start = document.getElementById('Start');
stop = document.getElementById('Stop');
let watchRunning = false;
Start.addEventListener('click', startHandler);
Stop.addEventListener('click', stopHandler);
function startHandler() {
if (!watchRunning) {
watchRunning = setInterval(update, 70);
}
}
function stopHandler() {
clearInterval(watchRunning);
watchRunning = null;
}
update();
var seconds;
var milliseconds;
var d;
function update() {
d = new Date();
seconds = d.getSeconds();
milliseconds = Math.floor((d.getMilliseconds() / 10));
if (milliseconds < 10 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ".0" + milliseconds;
} else if (milliseconds < 10 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ".0" + milliseconds;
} else if (milliseconds >= 0 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + "." + milliseconds;
} else if (milliseconds >= 0 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + "." + milliseconds;
}
}
#Time {
background-color: yellow;
max-width: 2.3%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
Try running the snippet and you will see what I mean. The time doesn't stop "running" after I click stop, and when I click start it resumes as if it was never stopped.

clearTimeout( return ID of setTimeout() );
clearTime variable is returned as a value by the setTimeout( ) timing method, which can be pass to the clearTimeout( ID ) as an ID to reference it - clearTimeout( clearTime );
How It Works
Whenever the clearTimeout( ) timing method is called on a setTimeout( ) timing method that is active, the clearTimeout( ) timing method will stop the execution of the setTimeout( ) timing method but without destroying its execution entirely.
The setTimeout( ) timing method is left idle during the period that the clearTimeout( ) timing method is called, and when you re-execute the setTimeout( ) timing method, it will start from the point its execution was stopped, not starting all over from the beginning.
You're good to go!

You should use a setInterval to run your code to update the stopwatch instead of relying on a Date; you can not stop the Date from changing, so even though you stopped updating your stopwatch, the seconds are still ticking by which makes it seem like your stopwatch never stopped.
#Time {
background-color: yellow;
max-width: 2.3%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time">00:00</p>
<script>
var start = document.getElementById('Start'), stop = document.getElementById('Stop'), time = document.getElementById('Time');
function StopWatch(props){
this.seconds = props.seconds||0;
this.milliseconds = props.milliseconds||0;
this.updateCallback = props.updateCallback;
this._running = false;
}
StopWatch.prototype = {
start: function(){
var _this = this;
if(!_this._running){
_this._running = true;
_this._intervalID = window.setInterval(function(){
if(++_this.milliseconds==100){
_this.seconds++;
_this.milliseconds = 0;
}
if(_this.updateCallback){
_this.updateCallback(_this.milliseconds, _this.seconds);
}
}, 10);
}
},
stop: function(){
window.clearInterval(this._intervalID);
this._running = false;
},
getTimeString: function(){
var ms = this.milliseconds, s = this.seconds;
if(ms<10){
ms = "0"+ms;
}
if(s<10){
s = "0"+s;
}
return s + ":" + ms;
}
}
var sw = new StopWatch({updateCallback: function(){
time.textContent = sw.getTimeString();
}});
start.addEventListener('click', function(){
sw.start();
});
stop.addEventListener('click', function(){
sw.stop();
});
</script>

Loading/Buffering text while loading audio in html5 custom player with JavaScript

I found a custom html5 audio player and successfully redesigned it, now I want to add a "loading/buffering" text while player is loading audio (otherwise users may freak out because nothing happening after they hit play).
Here is the code to explain:
function calculateTotalValue(length) {
var minutes = Math.floor(length / 60),
seconds_int = length - minutes * 60,
seconds_str = seconds_int.toString(),
seconds = seconds_str.substr(0, 2),
time = minutes + ':' + seconds
return time;
}
function calculateCurrentValue(currentTime) {
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
return current_time;
}
function initProgressBar() {
var player = document.getElementById('player');
var length = player.duration
var current_time = player.currentTime;
// calculate total length of value
var totalLength = calculateTotalValue(length)
jQuery(".end-time").html(totalLength);
// calculate current value time
var currentTime = calculateCurrentValue(current_time);
jQuery(".start-time").html(currentTime);
var progressbar = document.getElementById('seekObj');
progressbar.value = (player.currentTime / player.duration);
progressbar.addEventListener("click", seek);
if (player.currentTime == player.duration) {
$('#play-btn').removeClass('pause');
}
function seek(evt) {
var percent = evt.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
progressbar.value = percent / 100;
}
};
function initPlayers(num) {
// pass num in if there are multiple audio players e.g 'player' + i
for (var i = 0; i < num; i++) {
(function() {
// Variables
// ----------------------------------------------------------
// audio embed object
var playerContainer = document.getElementById('player-container'),
player = document.getElementById('player'),
isPlaying = false,
playBtn = document.getElementById('play-btn');
// Controls Listeners
// ----------------------------------------------------------
if (playBtn != null) {
playBtn.addEventListener('click', function() {
togglePlay()
});
}
// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay() {
if (player.paused === false) {
player.pause();
isPlaying = false;
$('#play-btn').removeClass('pause');
} else {
player.play();
$('#play-btn').addClass('pause');
isPlaying = true;
}
}
}());
}
}
initPlayers(jQuery('#player-container').length);
Player code (source) on CodePen
I want some text will be shown in the same "span" that shows
"start time" (please see CodePen) while media is loading;
The text " 'loading.' 'loading..' 'loading...' " must changing on
loop while media is loading;
When it is loaded the "loading" text must be changing on "start
time" as it is now.
So basically I wat to put some text in start time while it is not shows anything but zeroes
I'm new to JS
Thats why I need some help or point to right direction

You can use the "readyState" event of the audio player to show hide loading.
There is already a "SetInterval" even which is getting fired so in that we can add this code to show/hide the "Loading"
1st add the loading element(You can put it where ever you want"
<h3 id="loading" style="display:none;">Loading</h3>
Now let's add the code to check "readystate" inside "SetInterval"
if(player.readyState>0&&player.readyState<4){
$("#loading").show();
}
else{
$("#loading").hide();
}
You can read more about "readystate" here
/As per the request I have changed the code to use the start time as loading, to make it work we don't have to add anything inside html but need to do some changes in JS
First, add this inside "togglePlay" functions pay condition in the "else" block.
$(".start-time").html("Loading...");
After this inside "initProgressBar()" function replace the "jQuery(".start-time").html(currentTime);" with the below code
if (player.readyState === 4) {
jQuery(".start-time").html(currentTime);
}
so how it will work, When you click play button the start time text will show as "Loading" but once the file is loaded and the player is ready to play the text will be changed to "start time", Hope it works. Also updated the CodePen for better understanding
You can find the full code in the CodePen

You could use setInterval to cycle through the different 'loading' text and clearInterval when the player's play promise is done.
Here's a basic example:
var dots = 1;
var loading = setInterval(function(){
dots = (dots % 3) + 1;
$(".start-time").text("Loading" + Array(dots + 1).join("."));
console.log($(".start-time").text());
}, 250);
player.play().then(function() {
clearInterval(loading);
}).catch((error) => {
$(".start-time").text("Error loading");
});

Call a function when my timer reaches zero

I've got a timer function as follows (which I've just grabbed off a jsfiddle):
function countdown( elementName, minutes, seconds )
{
var element, endTime, hours, mins, msLeft, time;
function returnDate(){
return Number(new Date);
}
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (returnDate());
if ( msLeft < 1000 ) {
element.innerHTML = "0:00";
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
I call the function and set it to countdown to 2 minutes like so:
$(".btn-start").click(function(){
countdown("countdown-2-minutes",2,0);
});
I have another element with id countdown-8-minutes that I want to start immediately when the timer on countdown-2-minutes reaches 0. How should I do this? I suppose an okay way would be to monitor when the html on the first element reads "0:00" but I don't exactly know how to implement that.

Here's what I would suggest; First change your countdown() function to accept a callback parameter:
function countdown( elementName, minutes, seconds, callback )
{
var element, endTime, hours, mins, msLeft, time;
function returnDate(){
return Number(new Date);
}
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (returnDate());
if ( msLeft < 1000 ) {
element.innerHTML = "0:00";
if (typeof callback === 'function') {
callback.call()
}
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
then pass that callback with your initial call:
$(".btn-start").click(function(){
countdown("countdown-2-minutes",2,0, function(){countdown("countdown-8-minutes",8,0);});
});

Just call countdown() with the proper parameters when you detect that the timer is finished. Try this:
if ( msLeft < 1000 ) {
element.innerHTML = "0:00";
countdown("countdown-8-minutes",8,0);
}

You don't need to watch the element's content to know when to start the next timer. In fact you're already reacting to that happening on the line you check if ( msLeft < 1000 ) { in which you can start your next timer.
Once your current timer hits zero you can just start the next one inside that if statement.
Alternatively you can separate your timer logic from your element logic using something like this:
// CountdownTimer object. Give it a length (ms) to count to, a period (ms)
// to loop updates to the callback, and a callback (function(done:bool)) that
// handles update ticks where done=false and the final tick where done=true.
function CountdownTimer(length, period, callback) {
this.length = length;
this.period = period;
this.callback = callback;
// Assert the callback to be a function to avoid messy error handling, and
// show we noticed in the console.
if (typeof this.callback !== 'function') {
console.warn('Callback was not a function.');
this.callback = function(){};
}
// Some publically visible variables for time keeping.
this.startTime = 0;
this.elapsed = 0;
this.remaining = length;
// The _loop scope's 'this' is itself. Give it a handle on the CountdownTimer's
// 'this' so we can reference the variables inside the loop.
var scope = this;
// Main loop of the countdown timer.
this._loop = function() {
// Get the number of milliseconds since the countdown started.
scope.elapsed = Date.now() - scope.startTime;
if (scope.elapsed < scope.length) {
// Keep looping if the countdown is not yet finished.
scope.remaining = scope.length - scope.elapsed;
scope.callback(false);
} else {
// Finished looping when the countdown hits or passes the target.
scope.elapsed = scope.length;
scope.remaining = 0;
scope.callback(true);
// Stop the interval timer from looping again.
clearInterval(scope._t);
}
};
}
// This function starts up the CountdownTimer
CountdownTimer.prototype.start = function() {
this.startTime = Date.now();
this._t = setInterval(this._loop, this.period);
}
// Our test elements.
var progress2 = document.getElementById('prog-2m');
var progress8 = document.getElementById('prog-8m');
var clockElement = document.getElementById('clock');
var startButton = document.getElementById('start');
// The 2-minute timer.
var m2 = new CountdownTimer(2 * 60 * 1000, 33, function(done) {
// Calculate the time to display.
var mins = Math.floor(m2.remaining / 60 / 1000);
var secs = Math.floor(m2.remaining / 1000) % 60;
if (secs < 10) secs = '0' + secs;
clockElement.textContent = mins + ':' + secs;
if (done) {
// If we're done, set the timer to show zero and start the next timer.
clockElement.textContent = '0:00';
m8.start();
}
// Progress bar display update.
progress2.style.width = (40 * (m2.elapsed / m2.length)) + 'px';
progress8.style.width = (160 * (m8.elapsed / m8.length)) + 'px';
});
// The 8-minute timer.
var m8 = new CountdownTimer(8 * 60 * 1000, 33, function(done) {
// Calculate the time to display.
var mins = Math.floor(m8.remaining / 60 / 1000);
var secs = Math.floor(m8.remaining / 1000) % 60;
if (secs < 10) secs = '0' + secs;
clockElement.textContent = mins + ':' + secs;
if (done) {
// Once done, set the timer to zero and display "Done".
clockElement.textContent = '0:00 Done';
}
// Progress bar display update.
progress2.style.width = (40 * (m2.elapsed / m2.length)) + 'px';
progress8.style.width = (160 * (m8.elapsed / m8.length)) + 'px';
});
// Start the 2-minute timer when the button is clicked.
startButton.addEventListener('click', function() {
m2.start();
});
#progress {
width: 200px;
height: 20px;
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 2px;
position: relative;
margin: 8px 0;
}
#prog-2m {
width: 40px;
height: 20px;
background-color: #3c9;
position: absolute;
left: 0;
top: 0;
}
#prog-8m {
width: 160px;
height: 20px;
background-color: #c33;
position: absolute;
left: 40px;
top: 0;
}
<div id="progress">
<div id="prog-2m"></div>
<div id="prog-8m"></div>
</div>
<div id="clock">0:00</div>
<button id="start">Begin</button>

How to create a toggle button in Jquery-mobile?

I want my button to change color if clicked but it seems not working in this JQuery-Mobile. and If its clicked it seems like it increases the time count speed i dont know why.
Any help please guys.
var seconds = 0;
var minutes = 0;
var timer = null;
function toggle(ths) {
var clicked = $(ths).val();
$(ths).toggleClass("btnColor");
$("#tb").toggleClass("btnColorR");
$("#lblType").html(clicked);
$("#setCount").html(" minutes : " + minutes + " seconds : " + seconds);
//duration time
seconds = seconds + 1;
if (seconds % 60 == 0) {
minutes += 1;
seconds = 0;
}
timer = timer = setTimeout("toggle()", 1000);
}

try :
timer=setTimeout(function(){
toogle();
},1000);