123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
            
          
!
            
              @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;
    
    }
    
    
    
}
            
          
!
            
              $(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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console