I've just finished my frist project ever on GitHub and I'd like to get any opinions about it:Is the code following a good standard?Is there a way to improve the code to look more professional, less amateur?This is my first project that I want to put on my future portfolio site and it's very important for me to know any fields I can improve in my future projects. Thanks!HTML - There are lots of divs, is that correct? I had problem with semantic, because my project is just an application, there is no content, so I can't see any use of article tag or section tag.<!DOCTYPE html><html lang=en><head>    <meta charset=utf-8>    <meta http-equiv=x-ua-compatible content=ie=edge>    <meta name=viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>    <title>Pomodoro Timer</title>    <link rel=stylesheet type=text/css href=styles/main.css>    <script type=text/javascript src=scripts/main.js defer></script>    <audio src=http://www.orangefreesounds.com/wp-content/uploads/2014/09/Most-annoying-sound.mp3 preload=auto id=alarm></audio></head><body>    <div id=upperButtons>        <div id=work>Work</div>        <div id=longBreak>Long Break</div>        <div id=shortBreak>Break</div>    </div>    <div id=timer>        <div id=mode>Work</div>        <div id=addTime>+</div>        <div id=time>            <span id=minutes>25</span>:<span id=seconds>00</span>        </div>        <div id=reduceTime>-</div>    </div>    <div id=lowerButtons>        <div id=start>Start</div>        <div id=pause>Pause</div>        <div id=resume>Resume</div>        <div id=reset>Reset</div>    </div></body></html>CSS - Should I use percentages or pixels are correct for media queries? Is using so many !important is wrong habit? Is it better to change some content to classes instead of id and drop !important?/* RESETS */* {    margin: 0;    padding: 0;    -webkit-user-select: none; /* Chrome, Opera, Safari */    -moz-user-select: none; /* Firefox 2+ */    -ms-user-select: none; /* IE 10+ */    user-select: none; /* Standard syntax */}html {    background-color: #ff6347; /* Tomato color */}body {    position: absolute;    font-family: Times New Roman, Times, serif;    font-size: 3em;    color: #fff;    width: 1000px;    height: 525px;    left: 50%;    top: 50%;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);    overflow: hidden;}#upperButtons,#timer,#lowerButtons {    text-align: center;}#upperButtons div,#timer div,#lowerButtons div {    display: inline-block;    cursor: pointer;}#mode {    display: block !important;    cursor: auto !important;}#time {    cursor: auto !important;    vertical-align: middle;    font-size: 1.5em;}#upperButtons div,#lowerButtons div {    width: 150px;    padding: 6px 10px;    border: 2px solid #fff;    border-radius: 3px;    text-align: center;    font-size: 1.5rem;    margin: 10px;    letter-spacing: 0.1rem;    transition: all 0.35s linear;}#upperButtons div:hover,#lowerButtons div:hover {    color: #ff6347;    background-color: #fff;}#timer {    border: 2px solid #fff;    border-radius: 50%;    width: 276px;    height: 226px;    margin: 5% auto;    padding-top: 50px;}#addTime,#reduceTime {    vertical-align: middle;    font-size: 0.6em;}#resume {    display: none !important;}@media only screen and (max-width: 590px) {    #upperButtons div,    #lowerButtons div {        width: 80px;        line-height: 50px;        height: 50px;        padding: 3px 5px;        border: 2px solid #fff;        border-radius: 3px;        text-align: center;        vertical-align: middle;        font-size: 1.25rem;        margin: 0px;        letter-spacing: 0.1rem;        transition: all 0.35s linear;        margin-top: 25px;    }    #timer {        margin-bottom: 0px;        margin-top: 0px !important;    }    #longBreak {        line-height: 25px !important;    }    #upperButtons {        margin-bottom: 40px !important;    }    #lowerButtons {        margin-top: 8px;    }}JavaScript - Is declaring nearly all variables in that form at the beggining of the code is correct? Is there a way to simplify some functions or ifs chain?use strict;const    upperButtons = document.getElementById(upperButtons),    work = document.getElementById(work),    longBreak = document.getElementById(longBreak),    shortBreak = document.getElementById(shortBreak),    timer = document.getElementById(timer),    mode = document.getElementById(mode),    addTime = document.getElementById(addTime),    time = document.getElementById(time),    minutes = document.getElementById(minutes),    seconds = document.getElementById(seconds),    reduceTime = document.getElementById(reduceTime),    lowerButtons = document.getElementById(lowerButtons),    start = document.getElementById(start),    pause = document.getElementById(pause),    resume = document.getElementById(resume),    reset = document.getElementById(reset),    alarm = document.getElementById(alarm);let    clock,    timerId,    clockInterval,    count,    workTime = 25,    longBreakTime = 15,    shortBreakTime = 05;function intervalTimer(callback, interval) {    let        startTime,        remaining = 0,        state = 0; //  0 = idle, 1 = running, 2 = paused, 3= resumed    this.pause = function() {        if (state != 1) {            return;        }        remaining = interval - (new Date() - startTime);        window.clearInterval(timerId);        state = 2;    };    this.resume = function() {        clearTimeout(timerId);        if (state != 2) {            return;        }        state = 3;        window.setTimeout(this.timeoutCallback, remaining);    };    this.timeoutCallback = function() {        if (state != 3) {            return;        }        callback();        startTime = new Date();        timerId = window.setInterval(callback, interval);        state = 1;    };    startTime = new Date();    timerId = window.setInterval(callback, interval);    state = 1;}work.addEventListener(click, workOn);function workOn() {    mode.innerHTML = this.innerHTML;    minutes.innerHTML = workTime;    seconds.innerHTML = 00;    alarm.pause();}longBreak.addEventListener(click, longBreakOn);function longBreakOn() {    mode.innerHTML = this.innerHTML;       minutes.innerHTML = longBreakTime;    seconds.innerHTML = 00;    alarm.pause();}shortBreak.addEventListener(click, shortBreakOn);function shortBreakOn() {    mode.innerHTML = this.innerHTML;      minutes.innerHTML = shortBreakTime;    seconds.innerHTML = 00;    alarm.pause();}reset.addEventListener(click, function() {    work.addEventListener(click, workOn);    longBreak.addEventListener(click, longBreakOn);    shortBreak.addEventListener(click, shortBreakOn);    addTime.addEventListener(click, addTimeButton);    reduceTime.addEventListener(click, reduceTimeButton);    start.addEventListener(click, startTimer);    pause.removeEventListener(click, pauseOn);    resume.removeEventListener(click, resumeOn);    clearInterval(timerId);    alarm.pause();    mode.innerHTML = Work;    minutes.innerHTML = 25;    seconds.innerHTML = 00;    workTime = 25;    longBreakTime = 15;    shortBreakTime = 05;});function leadingZeros(i) {    return (00 + i).slice(-2);}function timeSaver() {    if (mode.innerHTML == Work) {        workTime = minutes.innerHTML;    }    else if (mode.innerHTML == Long Break) {        longBreakTime = minutes.innerHTML;    }    else {        shortBreakTime = minutes.innerHTML;    }}addTime.addEventListener(click, addTimeButton);function addTimeButton() {    minutes.innerHTML = parseInt(minutes.innerHTML) + 1;    minutes.innerHTML = leadingZeros(minutes.innerHTML);    if (minutes.innerHTML == 61) {        minutes.innerHTML = 01;    }    timeSaver();}reduceTime.addEventListener(click, reduceTimeButton);function reduceTimeButton() {    minutes.innerHTML = parseInt(minutes.innerHTML) - 1;    minutes.innerHTML = leadingZeros(minutes.innerHTML);    if (minutes.innerHTML == 0) {        minutes.innerHTML = 60;    }    timeSaver();}function pauseOn() {    clockInterval.pause();    pause.setAttribute('style', 'display: none !important;');    resume.setAttribute('style', 'display: inline-block !important;');}function resumeOn() {    clockInterval.resume();    resume.setAttribute('style', 'display: none !important;');    pause.setAttribute('style', 'display: inline-block !important;');}start.addEventListener(click, startTimer);function startTimer() {    work.removeEventListener(click, workOn);    longBreak.removeEventListener(click, longBreakOn);    shortBreak.removeEventListener(click, shortBreakOn);    addTime.removeEventListener(click, addTimeButton);    reduceTime.removeEventListener(click, reduceTimeButton);    start.removeEventListener(click, startTimer);    resume.addEventListener(click, resumeOn);    pause.addEventListener(click, pauseOn);    clockInterval = new intervalTimer(function() {        if (seconds.innerHTML == 0) {            if (minutes.innerHTML !== 00) {                minutes.innerHTML -= 1;                minutes.innerHTML = leadingZeros(minutes.innerHTML);                seconds.innerHTML = 59;            }            else if (minutes.innerHTML == 00) {                clearInterval(clock);                alarm.play();                work.addEventListener(click, workOn);                longBreak.addEventListener(click, longBreakOn);                shortBreak.addEventListener(click, shortBreakOn);            }        }        else if (seconds.innerHTML !== 0) {            seconds.innerHTML -= 1;            seconds.innerHTML = leadingZeros(seconds.innerHTML);        }    }, 1000);}
Pomodoro Timer in pure JavaScript/CSS/HTML
javascript;html;css