Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
        
       

        <div class="container">
        
            <h1>Pomodoro Timer</h1>
        
            <div class="inner">
            
                <div id="sessionTime" class="display">
                    <h4 class="tittle">Session Time</h4>
                    <div class="innerTimer"> 
                        <h4 class="ses" id="sesSub">&#8722;</h4>
                        <h2 id=sesTime class="ses">25</h2>
                        <h4 class="ses" id="sesAdd">&#10010;</h4>
                    </div>
                </div>


                <div id="breakTime" class="display">
                    <h4 class="tittle">Break Time</h4>
                    <div class="innerTimer"> 
                        <h4 class="brk" id="brkSub">&#8722;</h4>
                        <h2 id=brkTime class="brk">5</h2>
                        <h4 class="brk" id="brkAdd">&#10010;</h4>
                    </div>
                </div>

            </div>

            <div class="btn">

                <button id="btnPly" class="faBtn">
                    <i class="fa fa-play " aria-hidden="true"> START </i>
                </button>
                
                <button id="btnRes" class="faBtn">
                    <i class="fa fa-repeat" aria-hidden="true"> RESET </i>
                </button>

            </div>

            <div class="boxTimer">
                <h2 id="min"> </h2> <span> : </span> <h2 id="secs"> </h2>
            </div>

            
            <div class="hold-bar"><div class="prog-bar"></div></div>
         
            
        </div>    

        
    </body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Poiret+One');


body {
    /* font-family: 'Syncopate', sans-serif; */
    /* background-color: #9E1DD1; */
    font-family: 'Poiret One', cursive;
    text-shadow: 1px 1px 2px black;
}

.container h1{
    font-size: 6vw;
    margin: auto;
    width: 100%;
    text-align: center;
    /* font-family: 'Poiret One', cursive; */
}

.container{
    margin: auto;
    /* padding: 3% 0 0 0; */
    width: 50%;
    /* border: 1px solid black; */
    background-image: url("https://s3-us-west-2.amazonaws.com/i.cdpn.io/13871.lDdrF.6abaf63e-21a5-4150-9b24-066c64f52991.png");
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

 .inner{
    /* width: 100%; */
    padding: 0px;
    /* border: 1px solid black; */
    text-align: center;
}

div .display{
    display: inline-block;   
    /* margin: auto auto; */
    /* border: 2px solid black; */
    padding: 0px;
}

#sessionTime{
    /* width: 40%; */
    margin: 0 10% 0 0;
}
#breakTime {
    margin: 0 0 0 10%;
}


#sessionTime{
    margin: auto;
}

.tittle{
    font-size: 2vw;
    text-align: center;
    /* margin: auto 10%; */
    /* border: 1px solid black; */
    width: 100%;
}

.ses, .brk{
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    font-size: 2vw;
}

.innerTimer{
    font-size: 2vw;
}

.timeDisplay{
    border: 2rem solid green;
    margin: 5% auto;
    height: 300px;
    width: 35%;
    border-radius: 50%;
}

.btn{
    margin: auto;
    width: 50%;
    text-align: center;
}


.btn .faBtn{
    display: inline-block;    
    margin: auto;
}

.faBtn{
    text-align: center;
    width: 100px;
    cursor: pointer;
    height: 2rem;
}

.faBtn i{
    padding-top: 8px;
}

#btnPly{
    /* border: 3px solid black; */
    border: none;
    background: none;
    margin-right: 20px;
    font-size: 1rem;
    text-shadow: 1px 1px 0px black;
}

.btnDflt:disabled{
    color: black;
}

#btnRes{
    /* border: 3px solid red; */
    border: none;
    background: none;
    margin-right: 20px;
    font-size: 1rem;
    text-shadow: 1px 1px 0px black;
}

#min, span, #secs{
    /* margin: 20px auto;
    width: 50%;
    border: 1px solid black;
    text-align: center; */
    font-size: 3rem; 
    display: inline-block;
    font-weight: lighter;

}

.boxTimer{
    /* border: 1px solid black; */
    margin: 0 auto;
    text-align: center;
    /* font-family: 'Poiret One', cursive; */
    font-size: 2vw;
    width: 40%;
}

.hold-bar{
    /* margin-top: 14px; */
    /* border: 1px solid black; */
    height: 30px;
    width: 100%;
    border-radius: 10px;
    background-color: white;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
  
.prog-bar{
    background-color: green;
    width: 0%;
    height: 30px;
    /* border-radius: 10px; */
    border-bottom-left-radius: 10px;
}

/* ANIMATION */

#sesTime, #brkTime {
    -webkit-animation-duration: 0.3s; 
    /* -webkit-animation-delay: 0.3s; */
    /* -webkit-animation-iteration-count: infinite; */
}


/* MEDIA QURIES */
@media only screen and (max-width: 500px) {

    .container h1{
        font-size: 3rem;
        margin: auto;
        width: 100%;
        text-align: center;
        /* font-family: 'Poiret One', cursive; */
    }
   
    .container{
        margin: auto;
        /* padding: 3% 0 0 0; */
        width: 100%;
        height: 100%;
        /* border: 1px solid black; */
        background-image: url("https://s3-us-west-2.amazonaws.com/i.cdpn.io/13871.lDdrF.6abaf63e-21a5-4150-9b24-066c64f52991.png");
        background-repeat: no-repeat;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .tittle{
        font-size: 2rem;
        width: 100%
    }

    .ses, .brk{
        font-size: 2rem;
    }

    .btn{
        margin: auto;
        width: 100%;
        text-align: center;
    }

    #min, span, #secs{
        /* margin: 20px auto;
        width: 50%;
        border: 1px solid black;
        text-align: center; */
        font-size: 8vw; 
        display: inline-block;
        font-weight: lighter;
    
    }
    
    
    
}
              
            
!

JS

              
                $(function() {
  /* GLOBAL Variables */
  var sesVal = $("#sesTime").text(); //session Time
  var brkVal = $("#brkTime").text(); //break Time
  var secs = $("#secs").text("00"); //displays to sec
  var min = $("#min").text(25); //displays min

  var counterBar = 0;

  var animationEnd =
    "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"; //detects if animation is ended

  sesVal = parseInt(sesVal, 10); //parsing the value to make it a number type
  brkVal = parseInt(brkVal, 10); //parsing the value to make it a number type

  /* handles the session time click event, increment and decrement values */
  $("#sesSub").on("click", function() {
    //animation fade
    $("#sesTime")
      .addClass("animated fadeInDown")
      .on(animationEnd, function() {
        $(this).removeClass("animated fadeInDown");
      });

    //
    if (sesVal > 5) {
      $("#sesTime, #min").text((sesVal -= 5)); //if sesVal is greater than 5 decrement 5
    }
  });

  $("#sesAdd").on("click", function() {
    //animation fade
    $("#sesTime")
      .addClass("animated fadeInUp")
      .on(animationEnd, function() {
        $(this).removeClass("animated fadeInUp");
      });

    $("#sesTime, #min").text((sesVal += 5)); //increment sesVal by 5
  });
  /////////////////////////////////////////////////////////////////////////////

  /* handles the break time click event, increment and decrement values*/
  $("#brkSub").on("click", function() {
    //animation fade
    $("#brkTime")
      .addClass("animated fadeInDown")
      .on(animationEnd, function() {
        $(this).removeClass("animated fadeInDown");
      });

    if (brkVal > 5) {
      $("#brkTime").text((brkVal -= 5)); //if brkVal is greater than 5 decrement 5
    }
  });

  $("#brkAdd").on("click", function() {
    //animation fade
    $("#brkTime")
      .addClass("animated fadeInUp")
      .on(animationEnd, function() {
        $(this).removeClass("animated fadeInUp");
      });

    $("#brkTime").text((brkVal += 5)); //if brkVal is greater than 5 decrement 5
  });
  /////////////////////////////////////////////////////////////////////////////

  /* START button */
  var timerFn; //GLOBAL assign to timer function

  //start button function
  $("#btnPly").on("click", function() {
    console.log("should be press once after the timer starts... +"); //check if disable attr working

    $("#btnPly").attr("disabled", "disabled"); //disables after press

    $("#btnPly").addClass("btnDflt"); //change default style of disabled button

    timerFn = timer(sesVal); //timer is assign to timerFn;

    secondsTot = (sesVal + brkVal) * 60; //total seconds used for progress bar
  });

  /* timer function*/
  function timer(minutes) {
    // console.log(typeof minutes); //checking type of data. (needs to be a number)

    var minsToSec = minutes * 60; //converting minutes to seconds

    var counter = setInterval(setIntervalFunction, 1000); //Interval for the timer, assigned to counter variable (counter will be use to clearInterval)

    //callback function for setInterval
    function setIntervalFunction() {
      counterBar++;

      var percentBar = counterBar / secondsTot * 100; //convert seconds to percentage
      $(".prog-bar").css({ width: percentBar + "%" }); //fills the background for css

      if (percentBar === 100) {
        $(".prog-bar").css({ "border-bottom-right-radius": 10 + "px" });
      } //condition for the radius right.

      minsToSec--; //decrement seconds

      if (minsToSec === 0) {
        // seconds is equal to 0

        clearInterval(counter); //clears or stops the setInterval

        if (brkVal > 0) {
          //brkVal is greater than 0
          timer(brkVal); //passes brkval as argument
          brkVal = 0; //revalues brkVal to zero
        } else {
          //if brkVal has a value
          $("#btnPly").removeAttr("disabled"); // removes disable property
          $("#btnPly").removeClass("btnDflt"); //removesclass used for styling
        }
      } else {
        if (minsToSec % 60 >= 10) {
          //checks the reminder of its greater than 10
          $("#min").text(Math.floor(minsToSec / 60)); //displays the minutes to min, minsToSec is converted to Minutes, floor is rounded down.
          $("#secs").text(minsToSec % 60); //displays the remainder(modulo) to secs.
        } else {
          //if the remainder is less than 10
          $("#min").text(Math.floor(minsToSec / 60)); //converts the seconds to minutes, then rounded the value by the floor, and displays the value to min
          $("#secs").text(minsToSec % 60); //displays the remainder(modulo) to secs
        }
      }
    }
    return counter; //timer function will return the setInterval to timer, and timer to timerFn
  }

  /* RESET button */
  $("#btnRes").on("click", function() {
    clearInterval(timerFn); //stops the timerFn
    $("#min").text(sesVal); //sets the value of minutes to nothing
    $("#secs").text("00"); //sets the value of seconds to nothing
    $("#btnPly").removeAttr("disabled"); // removes disable property
  });
});

// $('#min').text(minutes);  //passes and displays the minutes to HTML

// $('#secs').text(seconds); //passes and displays the seconds to HTML

// $('#secs').text(seconds-=1); //reduced seconds by 1;

// if(minutes > 0 && seconds === 0){ //condition if seconds and minutes are 0;

//     $('#min').text(minutes-=1); ///reduced minutes by 1;

//     seconds = 60; // revalues seconds
// }

// else if(minutes === 0 && seconds === 0) { //condition to check if minutes is 0, then passes a new value of minutes in timer function.

//     clearInterval(counter); //clears the counter setInterval or stop

//     if (brkVal > 0) { //if brkVal gets zero
//         timer(brkVal, 60); //passes the a new argument to the timer function. takes the first argument as a minutes of brkVal
//         brkVal  = 0; //revalues brk to zero

//     } else {
//         $("#btnPly").removeAttr('disabled'); // removes disable property
//         $("#btnPly").removeClass('btnDflt'); //removesclass used for styling
//     }
// }

//////////////////////////////////////

/* button function */

//     var min = $("#min").text(sesVal);

//     var counterSession = setInterval(sesFuncTimer,100);

//     function sesFuncTimer()
//     {

//         $("#secs").text(secs-=1);

//         if(secs === 0) {

//             min.text(sesVal-=1);
//             secs = 61;

//         }
//         else if(sesVal === 0)
//         {
//             breakTimer();
//             clearInterval(counterSession);
//             console.log('brkTimerNxt');
//         }

//     }

//     /* Break timer function */

//    function breakTimer() {
//     //    console.log(typeof brkVal);
//         var secs = $("#min").text(brkVal);

//         var counterBreak = setInterval(brkFuncTimer,1000);

//         function brkFuncTimer() {

//             $("#secs").text(secs-=1);

//             if(secs === 0) {

//                 min.text(brkVal-=1);
//                 secs = 61;
//             }
//             else if(brkVal === 0)
//             {
//                 clearInterval(counterBreak);
//                 $('.boxTimer').hide();
//                 console.log('TIME!!!');
//             }
//         }

//    }

              
            
!
999px

Console