How to make a basic countdown timer

Question

I am trying to make a countdown for a really basic app in electron. I created a button in my .html file that is listed below. I also created an empty function called startTimer. How do I go about making a timer that will begin once I press the button? I assume that this needs to be done in my render.js file? Thanks in advance!

<button onclick="startTimer()">Start Timer</button>

main.js :

const { app, BrowserWindow } = require('electron')


function createWindow () {

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html')
  win.webContents.openDevTools()
}
app.whenReady().then(createWindow)

app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {

  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">


    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>





     <button onclick="startTimer()">Start Timer</button>


     <script src="./render.js"></script>
  </body>
</html>

https://stackoverflow.com/search?q=%5Bjavascript%5D+countdown+timer 4,199 results. Please, do some research before asking. — Heretic Monkey, Apr 13 '20 at 16:47

namila007 · Answer 1 · 2020-04-13T18:46:34.390

Recently I created a code to display countdown for given minutes, and setting the value by a function provided. You can try this code ;

const countdown = (durationInMin, setter) => {
   // added 1 second to start time, so this will start from 00 seconds
     let startTime = Date.now() + 1000
    let diff, min, sec
  //updating timer by 1 second
    let timer = setInterval(() => {
        if (diff <= 0) {
           //once the different reached zero, clearing the interval
            clearInterval(timer)
            return;
        }

        diff = durationInMin * 60 - (((Date.now() - startTime) / 1000) | 0)

        min = (diff / 60) | 0
        sec = (diff % 60) | 0
// formatting to two digits
        min = min < 10 ? "0" + min : min
        sec = sec < 10 ? "0" + sec : sec
// display format
        let t = min + ":" + sec
// calling the setter function  by passing the timer value
        setter(t)
    }, 1000)
}

Here you can give duration in minutes for durationInMin and setter function to display the return value from timer.

you can call use this as follow ;

function setter(value) {
 myGlobalVariable = value
}

startTimer() {
 countdown(5,setter);
}

More references: I referred this code from the following StackOverflow thread

Edit:

As you provided the code, you can try following;

renderer.js

const countdown = (durationInMin, setter) => {
    // added 1 second to start time, so this will start from 00 seconds
    let startTime = Date.now() + 1000
    let diff, min, sec
    //updating timer by 1 second
    let timer = setInterval(() => {
        if (diff <= 0) {
            //once the different reached zero, clearing the interval
            clearInterval(timer)
            return;
        }

        diff = durationInMin * 60 - (((Date.now() - startTime) / 1000) | 0)

        min = (diff / 60) | 0
        sec = (diff % 60) | 0
        // formatting to two digits
        min = min < 10 ? "0" + min : min
        sec = sec < 10 ? "0" + sec : sec
        // display format
        let t = min + ":" + sec
        // calling the setter function  by passing the timer value
        setter(t)
    }, 1000)
};

function setter(value) {
    var t = document.getElementsByClassName("timer")[0]
    t.innerText = value.toString()
}

function startTimer() {
    console.log("clicked")
    countdown(0.5, setter)
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">


    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
     <button onclick="startTimer()">Start Timer</button>
      <div class="timer">--:--</div>

     <script src="./renderer.js"></script>
  </body>
</html>

In the function where I call it there is an error on the first { after startTimer it says ',' ts expected, any thoughts on why? — Isaiah_62, Apr 13 '20 at 17:14
i edited the code, i just ran this on my chrome console. its working fine. are you using TS? — namila007, Apr 13 '20 at 17:20
Is that TypeScript? If so I wasn't using it, but I just installed it. How do I utilize it? — Isaiah_62, Apr 13 '20 at 18:04

Elias Faraone · Accepted Answer · 2020-04-13T18:38:19.460

0

You will need to update your render.js, and add fields in your HTML to hold the timer values:

// In the render.js file.

function startTimer(){

  // Retrieve the values of your inputs
  var seconds = document.getElementById("seconds").value || 0;
  var minutes = document.getElementById("minutes").value || 0;
  var hours = document.getElementById("hours").value || 0;
  
  // Calculate the total amount of milliseconds (1000 times the number of seconds).
  var totalMilliseconds = 1000*(Number(seconds) + Number(minutes)*60 + Number(hours)*60*60)
  
  // Start the timer with javascript builtin. 
  setTimeout(doSomething, totalMilliseconds)
}

function doSomething() {
  // Do something
  alert("Time is over!");
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">


    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>




     <label>Seconds: </label>
     <input type="number" id="seconds" name="seconds" placeHolder="insert seconds"><br>
     <label>Minutes: </label>
     <input type="number" id="minutes" name="minutes" placeHolder="insert minutes"><br>
     <label>Hours: </label>
     <input type="number" id="hours" name="hours" placeHolder="insert hours"><br>
     <button onclick="startTimer()">Start Timer</button>


     <script src="./render.js"></script>
  </body>
</html>

edited Apr 13 '20 at 18:38

answered Apr 13 '20 at 16:43

Elias Faraone

266
2
7

This may be an amateur question but where do the seconds/minutes actually get defined? – Isaiah_62 Apr 13 '20 at 17:04
Hi @IsaiahBell, I have assumed you have those as properties somewhere in your main class. perhaps if you share your code I can taylor the example better – Elias Faraone Apr 13 '20 at 17:18
I shared the main.js and index.html files – Isaiah_62 Apr 13 '20 at 17:47
You need an index.js as well in the same folder as the index.html so you can execute javascript. I will update my answer – Elias Faraone Apr 13 '20 at 18:08
Thanks a lot, this really helps. What's the difference between the index.js and the render.js files? – Isaiah_62 Apr 13 '20 at 18:29
They are basically the same thing. The name is just a matter of preferences. you can take the index.js code I have posted and put it in the render js and it will work the same :) – Elias Faraone Apr 13 '20 at 18:36
If you found this useful please upvote this answer so others can find it – Elias Faraone Apr 13 '20 at 19:23

How to make a basic countdown timer

2 Answers2