How to make a countdown reusable with an object?

Question

I have a countdown which runs at a click event. I need to make this program object-oriented. I would like to create an object with a constructor so my countdown will be able to run in each div I want. If someone could show me the way to create a clear object with the constructor to call it in a main.js file where i will be able to put the id of the target div I want in parameters.

html

</button>

<div id="target">

</div>

<div id="targetbis">

</div>

js countdown

var timeout;


function countdownto(target, time, callback) {
    var finish = new Date(time);
    var s = 1000,
        m = s * 60,
        h = m * 60,
        d = h * 24;

    (function timer() {
        var now = new Date();
        var dist = finish - now;

        var days = Math.floor(dist / d),
            hours = Math.floor((dist % d) / h),
            minutes = Math.floor((dist % h) / m),
            seconds = Math.floor((dist % m) / s);

        var timestring = minutes + ' minute(s) ' + seconds + ' seconde(s)';
        target.innerHTML = timestring

        clearTimeout(timeout);

        if (dist > 0) {
            timeout = setTimeout(timer, 1000);
        } else {
            callback()
        }

    })()

}

js which runs the countdown

let runningBtn = document.getElementById("runningbutton")

runningBtn.addEventListener("click", function(e) {


              clearTimeout(timeout);
            // countdown element
            var countdownel = document.getElementById('target');

            // 20 min
            var time = new Date()
            time.setSeconds(time.getSeconds() + 1200)


            // countdown function call
            countdownto(countdownel, time, function() {
                alert('finished');
            })


        })

what I would like to have in a main.js

let newCountdown = new Countdown("target");
let newnewCountdown = new Countdown("targetbis");

Just wrap your second block of code in a function. Here's information on the [`new` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new). Though TBH, a function that you invoke is probably just as good — Liam, Jul 31 '19 at 10:38
Yes but I would like to use a way with an object like 'class Timer { constructor {}}' for my first code ("js countdown") because my second ("js which runs the countdown") is running in an other file which is already an OOP object with constructor containing my event functions. — hugo, Jul 31 '19 at 10:47
Use a [`class` then](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). The code is basically the same — Liam, Jul 31 '19 at 11:17
Possible duplicate of [What's the best way to create JavaScript classes?](https://stackoverflow.com/questions/13190097/whats-the-best-way-to-create-javascript-classes) — Liam, Jul 31 '19 at 11:18

sinbar · Accepted Answer · 2019-07-31T11:22:29.407

1

A Object has three part: constructor, member method and member variable.

// constructor
function Countdown(target,btn){
    // member variable
    this.target = target
    this.btn = btn
    this.btn.addEventListener("click", function(e) {
            clearTimeout(timeout);
            var time = new Date()
            time.setSeconds(time.getSeconds() + 1200)
            // countdown function call
            this.countdownto(this.target, time, function() {
                alert('finished');
            })
        })
}
// member method
Countdown.prototype.countdownto = function(){
    ...
}

In es6 grammar it is looks like:

class Point {
  // constructor 
  constructor(x, y) {
    // member variable 
    this.x = x;
    this.y = y;
  }

   // member method 
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

edited Jul 31 '19 at 11:22

answered Jul 31 '19 at 10:52

sinbar

933
2
7
25

I need to use a class. So is it correct if i do the same with `class Countdown { constructor(target, btn) { here all the "this"} here functions }` ? – hugo Jul 31 '19 at 11:10
the `class` is the es6's new grammar. It has its structure, but the oop is same. I will offer a demo in the answer. – sinbar Jul 31 '19 at 11:19
@hugo this is the same as a class, it's just an [older syntax](https://stackoverflow.com/questions/13190097/whats-the-best-way-to-create-javascript-classes) – Liam Jul 31 '19 at 11:21

How to make a countdown reusable with an object?

1 Answers1