How to output a count down timer with javascript and php

How to output a count down timer with javascript and php
0

#1

Hey guys!

I hope that I can post a php or javascript program code here because I can’t find the section anywhere. I have got a count down timer working in javascript and have included the source file in my script tag in html… I am new to javascript but would like to output the time whenever the user stops the code and to use that in my php script, not sure how to do that but here is the code:

html code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">00:00:00</h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">
   </div>
   <script src="timer2.js">
   	
 



   </script>
</body>
</html>

Java code:

var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
    
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
   	   setTimeout(function() {
   	      time++;
   	      var min = Math.floor(time/100/60);
   	      var sec = Math.floor(time/100);
   	      var mSec = time % 100;

   	      if(min < 10) {
   	      	   min = "0" + min;
   	      }

   	      if (sec >= 60) {
   	      	 sec = sec % 60;
   	      }

   	      if (sec < 10) {
   	         sec = "0" + sec;

   	      }

   	      document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
   	      timer();
   	      
   	   }, 10);
   }
}

Countdown timer not working when added form attribute
#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


I’ve also edited your post by changing Java to JavaScript: Java is a completely different language, and you’re more likely to get help if you’re asking about the correct thing.


#3

Hey guys!

I have the following code that displays a timer but I would like to have an output so that I can use it in php to do a if statement with, is this possible?

This is my html code:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">00:00:00</h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">
     <h1 id="timerResult"></h1>
<input type="button" class="myButton" onclick="output()" value="Output">

   
   </div>
   <script src="timer2.js">
   	
 





   </script>
</body>
</html>

This is my timer.js code:

var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
   	   setTimeout(function() {
   	      time++;
   	      var min = Math.floor(time/100/60);
   	      var sec = Math.floor(time/100);
   	      var mSec = time % 100;

   	      if(min < 10) {
   	      	   min = "0" + min;
   	      }

   	      if (sec >= 60) {
   	      	 sec = sec % 60;
   	      }

   	      if (sec < 10) {
   	         sec = "0" + sec;

   	      }

   	      document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
   	      timer();
   	      
   	   }, 10);
   }


   
}

function output() {
 document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;
}



#4

Can you provide more explanation of exactly what you mean in the above statement? What is not happening that you want to happen?


#5

I have been trying to get some assistance with this timer and someone informed me that the output button should output the timer on the page with that output function but when I clicked on the output button, nothing is showing. The button doesn’t seem to work…

I am not sure if the output function is correct but basically what I am trying to do is to display the timer on the page whenever the user has stopped the clock and to do some if statement in php to give the user points… The output button doesn’t seem to click


#6

Let’s focus on one thing at a time. I have reviewed your HTML and JavaScript. Currently, I can click the Start button on the Stopwatch and then either click the Stopwatch or not and click the Output button. Once I click the Output button, it will display the current time on the Stopwatch below the Stopwatch. I have to click the Reset button to reset the Stopwatch back to 00:00:00.

So explain to me what you want it to do differently than what I just described that it currently does already.


#7

My apologies…

It didn’t work before but not sure whether did I click it properly or not… The other thing that I would like to know is that how would I use this value in php? I would like to use some if statements but php and javascript are two different languages correct? Sorry, I am new to javascript …


#8

When you ask questions, you have to be as specific as possible. What do you mean by “this value” and how are you wanting to use it in php?

Yes, they are different languages, but you can pass values to php “behind-the-scenes” or directly using a form. You just have to be more detailed in what you are trying to accomplish.

Also, if you have not already, you should go through the Free Code Camp curriculum so you have a better understand of what is possible with JavaScript. You seem to be trying to piece together code you did not create or understand which will only lead to frustration.


#9

Sorry about that and I will try to be more specific… Basically, I would like to use this timer output in php to check for certain conditions. I would like to give the user certain points if they do a test within a certain time…That is why I like to output this timer so that the user doesn’t cheat and it is stored somewhere as a string variable, to be used in my php processing page


#10

So if I am understanding you correctly, when someone clicks the Output button, you want to pass this timer value to a php script which will do something else with it?


#11

yes, that is correct. Sorry for the confusion earlier… I am basically creating a piano website and trying to give the user certain music test at the end of each video that they have watched. I would like to time them and if they can do the test within a certain time, reward them with points… Let’s say that the user finished in under a minute, then I can give them 500 points, if they finished under 5 mins, to give them 300 points etc


#12

Another question for you: How are you going to know when the user has finished the test? Are you actually going to have a Start button and a stop button and an Output button or will they click Start and a series of test questions will display that they will click answers and once the final question has been answered, the timer will stop and this timer value will be passed to your php script?


#13

Initially, I was thinking about having an automatic timer that starts when they begin the test and counting down if possible. I think this would prevent them from cheating as they can stop the timer anytime with this current timer…I think a countdown timer is better than one that is counting up. Then, it should automatically save the timer result in a string variable once they have finished the test or in a database…


#14

Once you figure out how to code what you describe above and have a final timer value you want to pass to php, come back and post a link to your full code (preferably a github repository) and someone can help you figure out how to pass the value to php.

You are going to have to learn some intermediate level JavaScript to accomplish what you describe above, so start working through the JavaScript sections of the FCC curriculum and work on some of the Front End Projects.


#15

hey guys!

I have managed to get my timer working but at the moment, it is counting up instead of down, not sure how to change that but I have also managed to output the timer in my php section and to update the database. The strange thing is that sometimes, the update will work and update the time but then sometimes, it will just update to 0. Should I just use time function in the database or timestamp?


<?php

if (!isset($_POST['submit'])) {
    header("Location: index.php?timer2=error");
} else {

include_once 'includes/dbh.php';



$test = $_POST['timer'];



$userid = 'piano0011';




$sql = "UPDATE primerlevel_tests
        SET time_achieved = ?
        WHERE user_uid = ?
       ";

$stmt = mysqli_stmt_init($conn);
        if (!mysqli_stmt_prepare($stmt, $sql)) {
          echo 'SQL error';
        } else {
          mysqli_stmt_bind_param($stmt, "ss", $test, $userid);
          mysqli_stmt_execute($stmt);
        }



 }
?>







<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <form action="" method="POST">
  <input type ="text" name="timer" id='test1' >
   <button type="submit" name="submit">Click here to submit result</button>
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">00:00:00</h1>
      <h1 id="timerResult"></h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">

<input type="button" class="myButton" onclick="output()" value="output">


   
   </div>
</form>
   
   <script>
var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
       setTimeout(function() {
          time++;
          var min = Math.floor(time/100/60);
          var sec = Math.floor(time/100);
          var mSec = time % 100;

          if(min < 10) {
               min = "0" + min;
          }

          if (sec >= 60) {
             sec = sec % 60;
          }

          if (sec < 10) {
             sec = "0" + sec;

          }

          document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
          timer();
          
       }, 10);
   }


   
}

function output() {
 var x = document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;

 document.getElementById('test1').value = x;

}






    
   </script>

  

 

 </form>


   
</body>
</html>









#16

To prevent a user from cheating, make sure you track the official time the users starts and ends the test on the server/database.


#17

thanks and I am just wondering how to change the code to make it count down?


#18

Since you did not create the original code, you need to study it and understand how it works. Once you figure out how it counts up, you should be able to reverse the logic to have it start at a specific time and count down to 00:00:00 or a timer greater than zero if the user finishes early.

If you get stuck on a particular part of the code, then ask specify question about it and we will attempt to guide you.


#19

I have changed the timer() time-- but it looks really weird:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <form action="" method="POST">
  <input type ="hidden" name="timer" id='test1' >
  
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">02:00:00</h1>
      <h1 id="timerResult"></h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">
      <button class="myButton" type="submit" name="submit">Submit Result</button>
<input type="button" class="myButton" onclick="output()" value="output">
<br></br>
<br></br>
<p class="instruction">Make sure that you click on the output button first before submitting your result</p>
   
   </div>
</form>
   
   <script>
var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
       setTimeout(function() {
          time--;
          var min = Math.floor(time/100/60);
          var sec = Math.floor(time/100);
          var mSec = time % 100;

          if(min < 10) {
               min = "0" + min;
          }

          if (sec >= 60) {
             sec = sec % 60;
          }

          if (sec < 10) {
             sec = "0" + sec;

          }

          document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
          timer();
          
       }, 10);
   }


   
}

function output() {
 var x = document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;

 document.getElementById('test1').value = x;

}


#20

The time calculations are based on the variable named time. In the beginning of the code, time = 0. You need to figure out what value to set time at so that your timer counts down correctly.

EDIT: Also, there is more to fixing the original code than just changing the time variable. The code for the timer function needs to be modified also.