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.

            
              <audio id="audio" src="http://www.soundjay.com/misc/paper-rip-13.wav" autostart="false"></audio>
<h1 id="test">Get Stuff Done</h1>
<h3>Let's finish off that checklist!</h3>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <div class="row">
        <h1>timer thingy</h1>
        <h4>click the big circle to start the timer</h4>
        <div id="line">
          <h1 id="time">time</h1>
        </div>
        <div id="base">
          <div id="prog">
            <div id="fill"></div>
          </div>
          <div id="arm"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <h3><a id="addbr">+</a> <span id="break">5</span> <a id="subbr">-</a></h3>
        </div>
        <div class="col-xs-6">
          <h3><a id="add">+</a> <span id="work">25</span> <a id="sub">-</a></h3>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <h3>The Checklist!</h3>
      <h4>Add items here!</h4>
      <input id="newthing" type="text" placeholder="  New Item (hit enter key)">


      <div id="list">
        <br>

      </div>
    </div>
  </div>
</div>
            
          
!
            
              html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #E0E0E0;
}
body{
  background: #F5F5F5 !important;
}
/* Palette generated by Material Palette - materialpalette.com/cyan/red */

.dark-primary-color    { background: #0097A7; }
.default-primary-color { background: #00BCD4; }
.light-primary-color   { background: #B2EBF2; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #FF5252; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #727272; }
.divider-color         { border-color: #B6B6B6; }



a {
  text-decoration: none !important;
  color:  white !important;
  cursor: pointer;
  
}

a:hover {
  text-shadow: 4px 3px 8px dimgray;
}

a:active {
  text-shadow: 1px 1px 2px dimgray;
}

h1,
h2,
h3,
h4 {
  text-align: center;
  text-shadow: 3px 2px 4px dimgray;
  
  font-weight: 900;
  color: #FFFFFF;
}

h1 {
  font-size: 6em;
 
}

h3 {
  font-size: 3em;
}
h4{
   
text-shadow: 3px 2px 2px dimgray;
}

#list{
  background:white;
}

#base {
  margin: auto;
  height: 400px;
  width: 400px;
  box-shadow: 3px 2px 7px dimgray;
  border-radius: 100%;
  background: #00BCD4;
}

#arm {
  margin: auto;
  background: linear-gradient( #FF5252 50%, rgba(255, 0, 0, 0) 20%);
  height: 400px;
  width: 25px;
 
  position: relative;
}
#arm:after
{
  z-index: -2;
  position: absolute;
  content: "";
  bottom: 200px;
  right: 1px;
  width: 100%;
  top: 0%;
  max-width:300px;
  background: rgba(255, 0, 0, 0);
  box-shadow: 2px 3px 4px dimgray;
}

#newthing {
  width: 200px;
  box-shadow: inset 1px 1px 6px dimgray;
  border-style: none;
  margin-left: 30%;
}

#list {
  box-shadow: inset 1px 1px 6px dimgray;
  margin-top: 30px;
  height: 60vh;
  width: 500px;
  margin-left: 50%;
  transform: translate(-250px, 0px);
  border-color: #B6B6B6;
}

.chck {
  margin-left: 5%;
  font-size: 2em;
  color: #212121;
}

input[type=checkbox]:checked +label {
  text-decoration: line-through;
  color: #212121;
}


/*checkbox from http://www.csscheckbox.com/checkbox/21789/3d-depth-css-checkbox/ */

input[type=checkbox].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
  padding-left: 32px;
  height: 27px;
  display: inline-block;
  line-height: 27px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 27px;
  vertical-align: middle;
  cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 -27px;
}

label.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_bce24e972f9de57735350efff79f574c.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
            
          
!
            
              //when the page loads
$(document).ready(function() {
  //-------------
  //Variables
  //--------------
  var breakTime = 5;
  var breakTimeS = 0;
  var workTime = 25;
  var workTimeS = 0;
  var rot = 0;
  var nrot = 0;
  var teckst = "";
  //timer function (to be defined later)
  var timeinterval;

  //on/off switches 
  var io = 0;
  var tme = 0;
  var wrk = 1;
  var frst = 1;

  //----------------------------------
  // +/- buttons and functions 
  //----------------------------------
  $("#addbr").click(function() {
    //stops any running timer
    io = 0;
    clearInterval(timeinterval);
    //resets the timers and arm to the beginning
    frst = 1;
    nrot = 0;
    //updates the amount of time
    breakTime++;
    //changes it in the html
    $("#break").text(breakTime);
  });
  $("#subbr").click(function() {
    io = 0;
    clearInterval(timeinterval);
    frst = 1;
    nrot = 0;
    breakTime--;
    $("#break").text(breakTime);
  });
  $("#add").click(function() {
    io = 0;
    clearInterval(timeinterval);
    frst = 1;
    nrot = 0;
    workTime++;
    $("#work").text(workTime);
  });
  $("#sub").click(function() {
    io = 0;
    clearInterval(timeinterval);
    frst = 1;
    nrot = 0;
    workTime--;
    $("#work").text(workTime);
  });

  $("#time").text(workTime + ":00");
  //--------------------------
  //calculates reamining time
  //--------------------------
  function getTimeRemaining(endtime) {
    //gets time in milliseconds
    var t = Date.parse(endtime) - Date.parse(new Date());
    //separates the ms into hrs, mins, and secs
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    return {
      'total': t,
      'minutes': minutes,
      'seconds': seconds,
      'hours': hours
    };
  }

  //-----------------------------------------------------------------
  //timer functions that find out time remaining and updates the html
  //-----------------------------------------------------------------
  function initializeClockW(id, ending) {
    var clock = document.getElementById(id);
    timeinterval = setInterval(function() {
      tme = getTimeRemaining(ending);
      
      //if the mins exceed 1 hour, show the number of hours
      if (workTime >= 60) {
        //when seconds get into the single digits use a leading 0
        if (tme.seconds < 10) {
          clock.innerHTML = tme.hours + ':' + tme.minutes + ':0' + tme.seconds;
          $(document).prop('title', tme.hours + ':' + tme.minutes + ':0' + tme.seconds);
        } else {
          clock.innerHTML = tme.hours + ':' + tme.minutes + ':' + tme.seconds;
          $(document).prop('title', tme.hours + ':' + tme.minutes + ':' + tme.seconds);
        }
      } else {
        if (tme.seconds < 10) {
          clock.innerHTML = tme.minutes + ':0' + tme.seconds;
          $(document).prop('title', tme.minutes + ':0' + tme.seconds);
        } else {
          clock.innerHTML = tme.minutes + ':' + tme.seconds;
          $(document).prop('title', tme.minutes + ':' + tme.seconds);
        }
      }
      //rotate the arm incrementally every second
      nrot += rot
      $("#arm").css("transform", "rotate(" + nrot + "deg)")

      $("#top").text(tme.hours + ':' + tme.minutes + ':' + tme.seconds)

      //when finished
      if (tme.total <= 0) {
        var sound = document.getElementById("audio");
        sound.play()
        wrk = 0;
        //stops timer
        clearInterval(timeinterval);
        //creates new date variables now
        var dt = new Date();
        var endtime = new Date();
        endtime.setMinutes(dt.getMinutes() + breakTime);
        //sets the interval (in deg) to rotate the arm every second
        rot = (360 / breakTime) / 60
          // starts the break timer
        initializeClockB("time", endtime);
      }
    }, 1000);
  }

  function initializeClockB(id, ending) {
    var clock = document.getElementById(id);
    timeinterval = setInterval(function() {
      tme = getTimeRemaining(ending);
      if (breakTime >= 60) {
           if (tme.seconds < 10) {
          clock.innerHTML = tme.hours + ':' + tme.minutes + ':0' + tme.seconds;
          $(document).prop('title', tme.hours + ':' + tme.minutes + ':0' + tme.seconds);
        } else {
          clock.innerHTML = tme.hours + ':' + tme.minutes + ':' + tme.seconds;
          $(document).prop('title', tme.hours + ':' + tme.minutes + ':' + tme.seconds);
        }
      } else {
        if (tme.seconds < 10) {
          clock.innerHTML = tme.minutes + ':0' + tme.seconds;
          $(document).prop('title', tme.minutes + ':0' + tme.seconds);
        } else {
          clock.innerHTML = tme.minutes + ':' + tme.seconds;
          $(document).prop('title', tme.minutes + ':' + tme.seconds);
        }
      }
      nrot += rot
      $("#arm").css("transform", "rotate(" + nrot + "deg)")
      if (tme.total <= 0) {
        var sound = document.getElementById("audio");
        sound.play()
        wrk = 1;
        clearInterval(timeinterval);
        var dt = new Date();
        var endtime = new Date();
        endtime.setMinutes(dt.getMinutes() + breakTime);
        rot = (360 / workTime) / 60
          //starts the work timer
        initializeClockW("time", endtime);
      }
    }, 1000);
  }

  //------------------------------
  //start/stops the timers
  //------------------------------

  //clicking the timer base starts/stops the timers, 
  //this tells it how much time is left, 
  //or to create new timers or start from where it 
  //left off and which timer to start
  $("#base").click(function() {
    //was the timer already on?
    if (io == 0) {
      io = 1
        //should the timer recalculate the remaining time (if workTime or 
        //BreakTime have been updated) or if it's the first time running
      if (frst == 1) {
        frst = 0;
        var dt = new Date();
        var endtime = new Date();
        endtime.setMinutes(dt.getMinutes() + workTime);
        endtime.setSeconds(dt.getSeconds() + workTimeS);
        rot = (360 / workTime) / 60
        initializeClockW("time", endtime);
      } else {
        //it should continue the timer from where it left off, which timer (break or work)?
        if (wrk == 1) {
          var dt = new Date();
          var endtime = new Date();
          endtime.setMinutes(dt.getMinutes() + tme.minutes);
          endtime.setSeconds(dt.getSeconds() + tme.seconds);
          initializeClockW("time", endtime);
        } else {
          var dt = new Date();
          var endtime = new Date();
          endtime.setMinutes(dt.getMinutes() + tme.minutes);
          endtime.setSeconds(dt.getSeconds() + tme.seconds);
          initializeClockB("time", endtime);
        }
      }
    } else {
      io = 0
        //stops any running timer
      clearInterval(timeinterval);
    }
  });

  //-------------------------
  //checklist functionality
  //------------------------
  function addCheckbox(name) {
    var container = $('#list');
    var inputs = container.find('input');
    //calculates the number of items in list for id purposes
    var id = inputs.length + 1;
    //adds the checkbox
    $('<input />', {
      type: 'checkbox',
      id: 'cb' + id,
      value: name,
      class: "css-checkbox"
    }).appendTo(container);
    //adds the checkbox's label/text
    $('<label />', {
      'for': 'cb' + id,
      text: name,
      class: 'chck css-label'
    }).appendTo(container);
    //new line
    $('<br>').appendTo(container);
    //resets the checkbox to blank
    teckst = "";
    $('#newthing').val(teckst);
  }

  //when you hit enter it calls addCheckbox function
  $('#newthing').keypress(function(e) {
    if (e.which == 13) {
      addCheckbox($('#newthing').val());
    }
  });
});
            
          
!
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