Stopwatch interface OOP (Vanilla JS) I'm learning OOP and the first exercise of the course was to made a Stopwatch class. I did it really fast and decided to make an interface for this little app.
I created the interface. Basically I want to know if the aproach that I used is fine, if I needed to create another class to control the ui, etc. I'm really lost with this OOP-UI integration thing.
The app is available in https://nacho-p5.github.io/
Here's the code:
Repo: https://github.com/nacho-p5/nacho-p5.github.io
index.html
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;normalize.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &lt;title&gt;Online Stopwatch&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;sw&quot;&gt;
        &lt;span id=&quot;sw-screen&quot;&gt;0.00&lt;/span&gt;
        &lt;div id=&quot;buttons&quot;&gt;
            &lt;button type=&quot;submit&quot; id=&quot;btnStart&quot; class=&quot;btn&quot;&gt;Start&lt;/button&gt;
            &lt;button type=&quot;submit&quot; id=&quot;btnStop&quot; class=&quot;btn&quot;&gt;Stop&lt;/button type=&quot;submit&quot;&gt;
            &lt;button type=&quot;submit&quot; id=&quot;btnReset&quot; class=&quot;btn&quot;&gt;Reset&lt;/button type=&quot;submit&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;script src=&quot;stopwatch.js&quot;&gt;&lt;/script&gt;
&lt;/html&gt;

stopwatch.js
// SW class
function Stopwatch() {
    let counter = 0;
    let intervalID = 0;
    const screen = document.getElementById('sw-screen');

    const addMiliseconds = () =&gt; {
        counter += 0.01
        updateScreen();
    };
    const updateScreen = () =&gt; {
        screen.innerHTML = counter.toFixed(2);
    }

    // start()
    this.start = function() {
        if (intervalID != 0) {
            throw new Error('Stopwatch has already started.')
        }
        intervalID = setInterval(addMiliseconds, 10);
    };
    // stop()
    this.stop = function() {
        if (intervalID == 0) {
            throw new Error('Stopwatch has already stoped.')
        }
        clearInterval(intervalID);
        intervalID = 0;
    };
    // reset()
    this.reset = () =&gt; {
        if (intervalID != 0) {
            this.stop();
        };
        counter = 0;
        updateScreen();
    };
    // duration()
    Object.defineProperty(this, 'duration', {
        get: function() {
            console.log(intervalID);
            return counter
        }
    });
};

// UI class
function UI(arrayOfbuttons) {
    this.toggleClass = function(elem) {
        arrayOfbuttons.forEach(e =&gt; e.classList.remove('activeBtn'))
        elem.classList.add('activeBtn');
    };
    this.removeClass = function() {
        arrayOfbuttons.forEach(e =&gt; e.classList.remove('activeBtn'))
    };
};

// HTML components
const screen = document.getElementById('sw-screen');
const btnStart = document.getElementById('btnStart');
const btnStop = document.getElementById('btnStop');
const btnReset = document.getElementById('btnReset');

// Initialize classes
const sw = new Stopwatch();
const ui = new UI([btnStart, btnStop]);

// Add event listeners
btnStart.addEventListener('click', function() {
    sw.start();
    ui.toggleClass(this);
});
btnStop.addEventListener('click', function() {
    sw.stop();
    ui.toggleClass(this);
});
btnReset.addEventListener('click', function() {
    sw.reset();
    ui.removeClass();
});
Welcome to Code Review! Hopefully you find the feedback here and in other posts useful!
Good things
The code makes good use of const for items that shouldn't be re-assigned (e.g. screen, btnStart, screen, etc.) and let for re-assignable values (e.g. counter, intervalID).
Suggestions
This code uses some ES6 features like arrow functions - thus it could use the class syntax. Until then, each instance of StopWatch has methods defined using this.[method]. This works but isn't as efficient as using the prototype. Such a change might likely require changing local variables to instance variables (e.g. screen =&gt; this.screen).
The naming of methods on UI could be more appropriate - e.g. toggleClass would be more appropriate as toggleActiveClass because it toggles the activeBtn class, and removeClass would be more appropriate as removeActiveClass for the same reason.
I see that the Error is thrown when clicking the button with text Start twice, which makes sense, but perhaps the click event handler should only call the function sw.start (as well as ui.toggleClass(this)) if intervalID === 0 - if that is a case then perhaps a public method to determine if the Stopwatch is started is necessary.
I noticed the HTML for the buttons labeled Stop and Reset have attributes on the close tag:

&lt;button type=&quot;submit&quot; id=&quot;btnStop&quot; class=&quot;btn&quot;&gt;Stop&lt;/button type=&quot;submit&quot;&gt;
&lt;button type=&quot;submit&quot; id=&quot;btnReset&quot; class=&quot;btn&quot;&gt;Reset&lt;/button type=&quot;submit&quot;&gt;


Setting attributes on the closing tags will either be ignored by the browser, or could lead to an error - see answers to this SO question for more of an explanation.