cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
   <title>Pomodoro Clock</title>
</head>
<body>
   <div class="container">
      <h1 id="maintitle">Pomodoro Clock</h1>
      <div class="controls row">
         <span class="workbuttons">
            <h4>Session length</h4>
            <button id="minusWorkButton" onclick="minusWork()">-</button>
            <span id="workTime">25</span>
            <button id="plusWorkButton" onclick="plusWork()">+</button>
         </span>
         <span class="breakbuttons">
            <h4>Break length</h4>
            <button id="minusBreakButton" onclick="minusBreak()">-</button>  
            <span id="breakTime">05</span>
            <button id="plusBreakButton" onclick="plusBreak()">+</button>
         </span>
      </div>
      <div class="timer" id="worktimer">
         <button id="workbutton" class="bigbutton" onclick="workCountDown()">
            <h1 id="workRunTimer">            
               <span id="workMinutes">25</span> :
               <span id="workSeconds">00</span>
            </h1>
            <h1 id="workStopTimer">
               <span id="workStopMinutes">25</span> :
               <span id="workStopSeconds">00</span>
            </h1>
            <h2 id="switcher1">Work</h2>
         </button>
      </div>
      <div class="timer" id="breaktimer">
         <button id="breakbutton" class="bigbutton" onclick="breakCountDown()">
            <h1 id="breakRunTimer">
               <span id="breakMinutes">25</span> :
               <span id="breakSeconds">00</span>
            </h1>
            <h1 id="breakStopTimer">
               <span id="breakStopMinutes">25</span> :
               <span id="breakStopSeconds">00</span>
            </h1>
            <h2 id="switcher2">Break</h2>
         </button>
      </div>
   </div>
   </div>
   <footer>
      Made by <a href="https://www.freecodecamp.com/radekjohn" target="_blank">Radek John</a>.
   </footer>
</body>
            
          
!
            
              body {
    text-align: center;
    color: white;
    background: black;
}
button {
    background: none;
    border: none;
    color: white;
}
button:focus {
    outline: 0;
}
#workStopTimer {
    display: none;
}
#breaktimer {
    display: none;
}
#breakStopTimer {
    display: none;
}
#maintitle {
    margin-bottom: 10%
}
.container {
    padding: 10%;
}
.controls {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    font-size: 150%;
}
.workbuttons {
    width: 50%;
    float: left;
}
.breakbuttons {
    width: 50%;
    float: right;
}
.timer {
    padding: 5%;
}
.bigbutton {
    display: block;
    height: 20em;
    width: 20em;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
    ;
}
            
          
!
            
              var workCounter = 0; // Time in seconds
var workCounterStorage = 0; // Stores time
var workTime = 25; // Work time in minutes
var workClicks = 0; // Stores number of clicks on countdown button
var parsedValue1 = 0; // Stores start value for the counter
var parsedValue2 = 0; // Stores start value for the counter after stop
var workColPerc = 0; // Stores background color percentage

var breakCounter = 0; // Time in seconds
var breakCounterStorage = 0; // Stores time
var breakTime = 5; // break time in minutes
var breakClicks = 0; // Stores number of clicks on countdown button
var parsedValue3 = 0; // Stores start value for the counter
var parsedValue4 = 0; // Stores start value for the counter after stop
var breakColPerc = 0; // Stores background color percentage

// Put 0 in front of single digits
function getTwo(x) {
    if (x >= 10) {
        return x;
    } else {
        return "0" + x;
    }
}

//Disable time setting buttons
function buttonsDisable() {
    document.getElementById("plusWorkButton").disabled = true;
    document.getElementById("minusWorkButton").disabled = true;
    document.getElementById("plusBreakButton").disabled = true;
    document.getElementById("minusBreakButton").disabled = true;
}

// Enable time setting buttons
function buttonsEnable() {
    document.getElementById("plusWorkButton").disabled = false;
    document.getElementById("minusWorkButton").disabled = false;
    document.getElementById("plusBreakButton").disabled = false;
    document.getElementById("minusBreakButton").disabled = false;
}

// Count time in minutes and seconds
// Count Minutes
function getMinutes(counterValue) {
    return getTwo(Math.floor(counterValue / 60));
}
// Count Seconds
function getSeconds(counterValue) {
    return getTwo(counterValue % 60);
}

// Decrease work Time
function minusWork() {
    if (workTime > 1) {
        // Control buttons
        document.getElementById("workTime").innerHTML = getTwo(workTime - 1);
        workTime = workTime - 1;
        // Main button
        document.getElementById("workMinutes").innerHTML = getTwo(workTime);
        document.getElementById("workStopMinutes").innerHTML = getTwo(workTime);
        document.getElementById("workStopSeconds").innerHTML = "00";
    }
}

// Increase work Time
function plusWork() {
    document.getElementById("workTime").innerHTML = getTwo(workTime + 1);
    workTime = workTime + 1;
    document.getElementById("workMinutes").innerHTML = getTwo(workTime);
    document.getElementById("workStopMinutes").innerHTML = getTwo(workTime);
    document.getElementById("workStopSeconds").innerHTML = "00";
}

// Decrease break Time
function minusBreak() {
    if (breakTime > 1) {
        document.getElementById("breakTime").innerHTML = getTwo(breakTime - 1);
        breakTime = breakTime - 1;
        document.getElementById("breakMinutes").innerHTML = getTwo(breakTime);
        document.getElementById("breakStopMinutes").innerHTML = getTwo(breakTime);
        document.getElementById("breakStopSeconds").innerHTML = "00";
    }
}

// Increase break Time
function plusBreak() {
    document.getElementById("breakTime").innerHTML = getTwo(breakTime + 1);
    breakTime = breakTime + 1;
    document.getElementById("breakMinutes").innerHTML = getTwo(breakTime);
    document.getElementById("breakStopMinutes").innerHTML = getTwo(breakTime);
    document.getElementById("breakStopSeconds").innerHTML = "00";
}
// Clocks for work
function workCountDown() {
    // Read work time
    parsedValue2 = parseInt($("#workTime").html());
    // Store clink to click counter
    workClicks++;
    // Countdown function
    var int1 = setInterval(function() {
        if (workCounter === 0) {
            // Counter is 0 but clicks number is even. That means clock were stopped by user
            // Show stop timer and hide run timer
            $("#workStopTimer").css("display", "block");
            $("#workRunTimer").css("display", "none");
            // Count time from storage
            document.getElementById("workStopMinutes").innerHTML = getMinutes(workCounterStorage);
            document.getElementById("workStopSeconds").innerHTML = getSeconds(workCounterStorage);
            clearInterval(int1);
            // Counter is 0 but clicks number is odd. That means countdown stopped
            if (workClicks % 2 !== 0) {
                // Call break clocks
                breakCountDown();
                // Set work clicks number and counter storage  to zero, hide work clocks and show break clocks
                workClicks = 0;
                workCounterStorage = 0;
                $("#worktimer").css("display", "none");
                $("#breakbutton").css("background", "black");
                $("#breaktimer").css("display", "block");
            }
        } else {
            // Decrement time counter by one every 1000 milliseconds (= 1 s)
            workCounter--;
            // Hide stop timer and show run timer
            $("#workStopTimer").css("display", "none");
            $("#workRunTimer").css("display", "block");
        }
        // Get time values in minutes and seconds from counter
        document.getElementById("workMinutes").innerHTML = getMinutes(workCounter);
        document.getElementById("workSeconds").innerHTML = getSeconds(workCounter);
        // Change clock background according to elapsed time
        if (workCounter > 0) {
            workColPerc = 100 * workCounter / (parsedValue2 * 60);
            $("#workbutton").css({
                background: 'linear-gradient(black' + " " + workColPerc + '%, #003366' + " " + workColPerc + '%)'
            });
        }
    }, 1000);
    // On clock start …
    if (workClicks === 1) {
        // Set counter value
        workCounter = parsedValue2 * 60;
        // Disable time control buttons
        buttonsDisable();
        // When clocks are stopped by user
    } else if (workClicks % 2 === 0) {
        // Enable time control buttons
        buttonsEnable();
        // Store counter value
        workCounterStorage = workCounter;
        // Set counter value to zero
        workCounter = 0;
        // Look whether user changed time and reset it
        parsedValue1 = parseInt($("#workTime").html());
    } else {
        buttonsDisable()
        if (parsedValue2 == parsedValue1) {
            workCounter = workCounterStorage;
        } else {
            workCounter = parsedValue2 * 60;
        }
    }
}
// Clock for break time. Same functioning as working clock, no comments needed 
function breakCountDown() {
    parsedValue4 = parseInt($("#breakTime").html());
    breakClicks++;
    var int = setInterval(function() {
        if (breakCounter === 0) {
            $("#breakStopTimer").css("display", "block");
            $("#breakRunTimer").css("display", "none");
            document.getElementById("breakStopMinutes").innerHTML = getMinutes(breakCounterStorage);
            document.getElementById("breakStopSeconds").innerHTML = getSeconds(breakCounterStorage);
            clearInterval(int);
            if (breakClicks % 2 !== 0) {
                workCountDown();
                breakClicks = 0;
                breakCounterStorage = 0;
                $("#breaktimer").css("display", "none");
                $("#workbutton").css("background", "black");
                $("#worktimer").css("display", "block");
            }
        } else {
            breakCounter--;
            $("#breakStopTimer").css("display", "none");
            $("#breakRunTimer").css("display", "block");
        }
        document.getElementById("breakMinutes").innerHTML = getMinutes(breakCounter);
        document.getElementById("breakSeconds").innerHTML = getSeconds(breakCounter);
        if (breakCounter > 0) {
            breakColPerc = 100 * breakCounter / (parsedValue4 * 60);
            $("#breakbutton").css({
                background: 'linear-gradient(black' + " " + breakColPerc + '%, #0066CC' + " " + breakColPerc + '%)'
            });
        }
    }, 1000);

    if (breakClicks === 1) {
        breakCounter = parsedValue4 * 60;
        buttonsDisable();
    } else if (breakClicks % 2 === 0) {
        buttonsEnable();
        breakCounterStorage = breakCounter;
        breakCounter = 0;
        parsedValue3 = parseInt($("#breakTime").html());
    } else {
        buttonsDisable();
        if (parsedValue4 == parsedValue3) {
            breakCounter = breakCounterStorage;
        } else {
            breakCounter = parsedValue4 * 60;
        }
    }
}
            
          
!
999px
Loading ..................

Console