2
\$\begingroup\$

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);
}
\$\endgroup\$

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.