Develop Reference

Stopwatch not incrementing JavaScript

I made a simple clock and used a button to switch to a stopwatch. Since I couldn't figure out a better solution I duplicated the container, asigned a function that toggles display on/off on the containers to swap between the clock and stopwatch so that it remains in the same position. I don't understand why my stopwatch is not incrementing and what I should do to solve this problem. Any help would be appreciated. Here's my code:
<div id="container">
<div id="clock">
<span id="back">88:88:88</span>
<span id="front">00:00:00</span>
<div class="buttons">
<button id="button-left" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
<button id="button-stop"><i class="fa-solid fa-stop"></i></button>
<button id="button-play" ><i class="fa-solid fa-play"></i></button>
<button id="button-right"><i class="fa-solid fa-delete-left"></i></button>
</div>
</div>
</div>
<div id="container-2">
<div id="clock-2">
<span id="back-2">88:88:88</span>
<span id="front-2">00:00:00</span>
<div class="buttons-2">
<button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
<button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i></button>
<button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i></button>
<button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i></button>
</div>
</div>
</div>
function myFunction() {
var x = document.getElementById("container-2");
let y = document.getElementById("container");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
function startSW() {
clearInterval(stopwatch);
start = setInterval(stopwatch, 1000);
}
function stopSW() {
clearInterval(start);
}
function reset(){
clearInterval(stopwatch);
document.getElementById("front-2").innerHTML = "00:00:00";
}
function stopwatch() {
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
seconds++;
if(seconds == 60){
seconds = 0;
minutes++;
if(minutes == 60) {
minutes = 0;
hours++;
}
}
if (seconds < 10){
displaySeconds = "0" + seconds;
} else {
displaySeconds = seconds;
}
if (minutes < 10){
displayMinutes = "0" + minutes;
} else {
displayMinutes = minutes;
}
if (hours < 10){
displayHours = "0" + hours;
} else {
displayHours = hours;
}
let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
document.getElementById("front-2").innerHTML = stopwatchNow;
}

Hello at the start of your stopwatch function you set
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
and that's what you display later in the code, you need to define this variables outside of this function

This is because in function stopwatch, every time this function runs you set
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
These variables will always be 0, since you set them when function runs. In order to fix this, you need to move them outside the function:
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
function stopwatch(){
// removed
seconds++; // this stays here
// the rest of your code goes in here
}
This way your variables won't reset to 0 when function starts to run

<div id="container-2">
<div id="clock-2">
<span id="front-2">00:00:00</span>
--- >>
<span id="back-2">88:88:88</span>
</div>
</div>
<div class="buttons-2">
<button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i>fun</button>
<button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i>stop</button>
<button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i>start</button>
<button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i>reset</button>
</div>
<script>
function myFunction() {
var node = document.getElementById("back-2");
display(node);
}
var start;
function startSW() {
clearInterval(start);
start = setInterval(stopwatch, 1000);
}
function stopSW() {
clearInterval(start);
}
function reset(){
clearInterval(start);
document.getElementById("front-2").innerHTML = "00:00:00";
document.getElementById("back-2").innerHTML = "00:00:00";
hours = 0;
minutes = 0;
seconds = 0;
}
var hours = 0;
var minutes = 0;
var seconds = 0;
function stopwatch() {console.log('stopwatch')
seconds++;
if(seconds == 60){
seconds = 0;
minutes++;
if(minutes == 60) {
minutes = 0;
hours++;
}
}
display();
}
function display(node){
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
if (seconds < 10){
displaySeconds = "0" + seconds;
} else {
displaySeconds = seconds;
}
if (minutes < 10){
displayMinutes = "0" + minutes;
} else {
displayMinutes = minutes;
}
if (hours < 10){
displayHours = "0" + hours;
} else {
displayHours = hours;
}
let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
if(!node)node=document.getElementById("front-2");
node.innerHTML = stopwatchNow;
}
</script>
there were a variety of mistakes,
clearInterval not being given the correct value
the time variables needed to be declared in global scope
i can only guess what myfunction is supposed to be doing
etc...
have fun

Ajax slider won't move to next slide

I have dynamic data returning in my view as slide, each time i click next button data will save to localStorage and in final slide all data from storage will be send to backend.
The problem with my current code is that I only can reach slide 1 and then next button only stores data but won't go to next slide.
Code
HTML
<div class="answerPanel">
<h4 class="text-center">In order to complete this Quiz successfully, pay attention to timer.</h4>
</div>
Script
$('#projectTable tbody').on( 'click', 'tr', function (e) {
e.preventDefault();
$('.projectName').empty();
$('.answerPanel').html('');
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
$('.answerPanel').append('<h4 class="text-center">In order to complete this Quiz successfully, pay attention to timer.</h4><button id="clicks" class="btn btn-primary">Begin</button>');
$('.projectName').empty();
var projectId = $(this).data('id');
//quizzes
$.ajax({
type:'GET',
url:'{{url('dashboard/getQuizzeswithChoices')}}/'+projectId,
beforeSend: function(data) {
console.log("click - ajax before send", data);
},
success:function(data){
$('.projectName').append('of ', data.project.name);
//return existed data to quizzes
var index = 0;
var countdownTimer = null;
var count = 0;
$("#clicks").click(function(e){
e.preventDefault();
// timer function
function timer(seconds, countdownTimer, callback) {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Times Up!";
$("#clicks").attr("disabled", true);
$('.answerPanel').html('<div class="text-center text-danger">OH NO! <br> Times Up!</div>');
} else {
seconds--;
}
//Pass seconds param back to the caller.
callback(seconds);
}
//We pass the countdownTimer param into the timer function as well.
if (countdownTimer != null) {
clearInterval(countdownTimer);
}
if(typeof data.quizzes[index] !== 'undefined'){
seconds = data.quizzes[index].quiz_time;
}
countdownTimer = setInterval(function() {
timer(seconds, countdownTimer, function(_seconds){
seconds = _seconds;
})
}, 1000);
// printing function
if(typeof data.quizzes[index] !== 'undefined'){
var html = '<form id="sendAnswers"> #csrf #method('POST') <div class="row"><div class="col-md-12"><div class="pull-left questionTitle">'+data.quizzes[index].question+'</div><div class="pull-right" id="countdown"></div></div></div>';
if(data.quizzes[index].choices.length > 0){
html+='<div class="col-md-12">';
if(data.quizzes[index].question_type == 'multiple'){
data.quizzes[index].choices.forEach((element, index, array) => {
html+='<div class="checkbox checkbox-primary">';
html+='<input class="checkboxes form-check-input" id="choice" name="checkbox" type="checkbox" value="'+element.choice+'">';
html+='<label class="control-label">'+element.choice+'</label>';
html+='</div>';
});
} else if (data.quizzes[index].question_type == 'single') {
data.quizzes[index].choices.forEach((element, index, array) => {
html+='<div class="radio radio-primary">';
html+='<input class="form-check-input" id="radio" name="radio" type="radio" value="'+element.choice+'">';
html+='<label class="control-label">'+element.choice+'</label>';
html+='</div>';
});
} else {
alert('hi');
data.quizzes[index].choices.forEach((element, index, array) => {
html+='<div class="row">hi';
html+='<input id="input" name="input" type="text">';
html+='<label>'+element.choice+'</label>';
html+='</div>';
});
}
html+='<button id="clicks" type="submit" class="saveSteps btn btn-primary">Next</button></div></form>';
}
$(".answerPanel").html(html);
index++;
}
// if(data.quizzes.length > index) {
// $("#clicks").html("Next");
// }
if(data.quizzes.length === index) {
$("#clicks").html("Send");
$('#clicks').removeClass('btn-primary').addClass('btn-success saveAnswers');
}
//end of printing function
//send form data
$('.saveSteps').unbind().bind('click', function(e){
e.preventDefault();
console.log('saved');
var checkboxes = [];
$("input.checkboxes:checkbox:checked").each(function(){
checkboxes.push($(this).val());
});
// next storage
var radios = [];
$("input.radio:checkbox:checked").each(function(){
radios.push($(this).val());
});
// next storage
var formData = new FormData();
formData.append('checkbox', checkboxes);
formData.append('radio', radios);
$.post({
type: 'POST',
url: '{{route('quizzes.store')}}',
dataType: "json",
processData: false,
contentType: false,
data: formData,
success:function(data){
console.log('data', data);
// $('.answerPanel').html('<h1>Your Score: <span class="text-success">200</span></h1><h4>Thank you for taking this quiz</h4>');
// $("#clicks").hide();
}
});
});
//send form data
});
//return existed data to quizzes
}
// rest of it...
As you can see in this video my data saves successfully but it won't go to next slide (page).
Any idea where the issue might be?

How to calculate time difference using jQuery

I have code for calculating time difference and it works well. I need to change the method (actually I added one more method in certain condition). The method that I added in a condition when the textbox has value Istirahat, and then I need to change the method to the time difference that I made minus one hour.
I think it will be confusing to see my explanation without the code.
Here's the code:
$(document).ready(function() {
var $time1 = $("#start");
var $time2 = $("#end");
var $diff = $("#jam_total");
function updateHours() {
var dtStart = new Date("7/20/2015 " + $time1.val());
var dtEnd = new Date("7/20/2015 " + $time2.val());
var stats1 = $("#status_check").val();
if(stats1!='ISTIRAHAT') {
var diff = ((dtEnd - dtStart)) / 1000;
} else if(stats1!='TANPA ISTIRAHAT') {
var diff = ((((dtEnd - dtStart)) / 1000) - 1);
}
var totalTime = 0;
if (diff > 60*60*12) {
totalTime = formatDate(60*60*12);
} else {
totalTime = formatDate(diff);
}
$diff.val(totalTime);
}
function formatDate(diff) {
var hours = parseInt(diff / 3600) % 24;
var minutes = parseInt(diff / 60) % 60;
var seconds = diff % 60;
return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes);
}
$("#option2").on("change", function() {
if($time1.val() && $time2.val()) {
updateHours();
}
});
});
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />
<br /><br />
<select name="option2" id="option2" onchange="Choose1(this)" style="float:left">
<option value="-">-</option>
<option value="istirahat">istirahat</option>
<option value="tanpa istirahat">tanpa istirahat</option>
</select>
<input type="text" name="status_check" size="8" readonly="readonly" id="status_check" style="text-transform:uppercase" />
<br /><br />
Total: <input type="text" id="jam_total" type="text" name="jam_total" size="18" readonly="readonly">
<br /><br />
<script>
function Choose1(data) {
document.getElementById("status_check").value = data.value;
}
</script>
Try to check the jQuery function at the code like this:
else if (stats1 != 'TANPA ISTIRAHAT') {
var diff = ((((dtEnd - dtStart)) / 1000) - 1);
}
var diff = (((dtEnd - dtStart)) / 1000) - 1) is what I mean, that code won't work perfectly like I want. What I want is like this:
Please check the code inside if var diff = ((dtEnd - dtStart)) / 1000; I want the result of this code to be minus one hour.

First of all there is one thing wrong, you need to set stats1 to UpperCase, otherwise you can't compare correct. Second thing is you are calculating time over seconds, you should minus 60*60 (3600 to minus 1 hours).
function updateHours(){
var dtStart = new Date("7/20/2015 " + $time1.val());
var dtEnd = new Date("7/20/2015 " + $time2.val());
var stats1 = $("#status_check").val().toUpperCase();
// if you don't add toUpperCase, istirahat won't be equal to ISTIRAHAT so everytime..
// first if block will be executed
if(stats1!='ISTIRAHAT'){
var diff = ((dtEnd - dtStart)) / 1000;
}
else if(stats1!='TANPA ISTIRAHAT'){
var diff = ((((dtEnd - dtStart)) / 1000) - 3600); // and you should minus 3600
}
var totalTime = 0;
if (diff > 60*60*12) {
totalTime = formatDate(60*60*12);
;
} else {
totalTime = formatDate(diff);
}
$diff.val(totalTime);
}
Here is the working fiddle
Hope helps,

How do you embed a JsFiddle as an iFrame in HTML only?

This is what happens when I embed the JsFiddle into my website as a result:
http://i.imgur.com/JkDefod.png
What can I do so that my embedded JsFiddle only shows the running program and not the extra text above?
Here is my JsFiddle code:
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = "0" + min + "m";
var min2 = min + "m";
var sec1 = "0" + sec + "s";
var sec2 = sec + "s";
document.getElementById("time").innerHTML = (min < 10 ? min1.fontcolor("red") : min2.fontcolor("red")) + ":".fontcolor("red") + (sec < 10 ? sec1.fontcolor("red") : sec2.fontcolor("red"));
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
<div id="worked"></div>
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
<h1 id="time" style="text-align: center;"> </h1>

You can directly add this code in your page, or using the JsFiddle embeded, do like this:
<div class="someClass">
<script async src="//jsfiddle.net/DiogoBernardelli/vuc85mok/embed/result/"></script>
</div>
And add this in your Stylesheet (.css) file:
.someClass iframe {
height: 200px //you can manually change this height
}

If you want to add only this countdown timer on your web-page, why don't you add your JS code in the tags after your divs?
Something like this:
<body>
<div id="worked"></div>
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
<h1 id="time" style="text-align: center;"> </h1>
</body>
<script>
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = "0" + min + "m";
var min2 = min + "m";
var sec1 = "0" + sec + "s";
var sec2 = sec + "s";
document.getElementById("time").innerHTML = (min < 10 ? min1.fontcolor("red") : min2.fontcolor("red")) + ":".fontcolor("red") + (sec < 10 ? sec1.fontcolor("red") : sec2.fontcolor("red"));
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
</script>

page refresh countdown timer does not continue using javascript

<html>
<head>
<script>
var seconds=3600;
function secondPassed() {
var minutes = Math.round((seconds-30)/60);
console.log(minutes);
var hours=Math.round((minutes)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML =hours + ":"+ minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(myVar);
document.getElementById('countdown').innerHTML = "Time Out";
} else {
seconds--;
}
}
var myVar = setInterval(secondPassed ,1000);
</script>
</head>
<body>
<p id="countdown"></p>
</body>
</html>
MY Question : page refresh and countdown timer does not continue.

You can do this by using javascript cookies only but you need to use two file
first file contains total time you need for countdown i.e in your code is 3600 seconds
let us take first file index.html write code
<!DOCTYPE html>
<html>
<head>
<title>Countdown timer</title>
<script type="text/javascript">
var seconds = 3600;
document.cookie = "timer=" + seconds;
window.location.href = "time.html";
</script>
</head>
<body>
</body>
</html>
Next second file let us take time.html add below code
<html>
<head>
<script>
function getCookie(name) {
var nameEQ = name + "=";
//alert(document.cookie);
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(nameEQ) != -1) return c.substring(nameEQ.length,c.length);
}
return null;
}
// var seconds=7200;
// document.cookie = "timer=" + seconds;
function secondPassed() {
seconds = parseInt(getCookie('timer'));
console.log(seconds);
var minutes = parseInt(seconds / 60, 10);
console.log(minutes);
var remainingSeconds = parseInt(seconds % 60, 10);
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds + ' minutes remaning';
if (seconds == 0) {
clearInterval(myVar);
document.getElementById('countdown').innerHTML = "Time Out";
} else {
seconds--;
}
document.cookie = "timer=" + (seconds);
}
var myVar = setInterval(secondPassed ,1000);
</script>
</head>
<body>
<p id="countdown"></p>
</body>
</html>
Note : whenever you want to run countdown timer just run time.html, even if you refresh also, time remains same
Note : if you want to refresh page or want to add when time up add your activity in
if (seconds == 0) {
clearInterval(myVar);
// add activity
}