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.container
    h1 Free code Camp - Pomodoro
    div.button
      span#clock
      .session
        div session
        span.session__plus +
        span.session__time 25
        span.session__minus -
      .break
        div break
        span.break__plus +
        span.break__time 25
        span.break__minus -
      span.time 25:00
      span.break-time 25:00
      span.play start
      span.pause pause

    //-http://complexdan.com/svg-circleellipse-to-path-converter/
    svg#my-svg.arc(xmlns="http://www.w3.org/2000/svg" version='1.1' \
        height="298" width="100%")
      path(stroke-dasharray='472', stroke-dashoffset='0.00', \
      d='M 20, 0,m -150, 0,a 150,150 0 1,0 300,0 150,150 0 1,0 -300,0')

    svg.arcAnim(xmlns="http://www.w3.org/2000/svg" version='1.1' \
        height="298" width="100%")
      path.hide(stroke-dasharray='472', stroke-dashoffset='0.00', \
      d='M 120, 0,m 130, 0,a 150,150 0 1,0 300,0 150,150 0 1,0 -300,0')

    svg(style='position: absolute; width: 0; height: 0; overflow: hidden', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
      defs
        symbol#icon-stop(viewbox='0 0 32 32')
          title stop
          path.path1(d='M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z')
          path.path1(d='M21 8l-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3-5-5 5-5z')


    svg.icon.icon-stop
      use(xlink:href='#icon-stop')

    footer
      div.thx Thanks for watching.
      div Made with 
        div
          span.striked love 
          span.italic a keyboard



              
            
!

CSS

              
                //https://coolors.co/2b2d42-8d99ae-edf2f4-ef233c-d80032
$purple      =       #2b2d42 //purple fonce
$gray-blue   =       #8d99ae //gray-blue
$white       =       #edf2f4 //whithe gray
$red-clear   =       #ef233c //red pantone
$red         =       #d80032 //red fonce

mask()
  position: relative;
  z-index: 10;
  background-color: #2b2d42;

*
  user-select: none;

body
  background-color $purple 
  color $white
  display flex;
  font-family 'Roboto', sans-serif
  text-align center
  justify-content center
  align-items center
  flex-wrap wrap
  align-content center
h1
  mask()
  font-size 1em
  padding: 0 0 1em;
  margin: 0;
  //text-transform capitalize 
span
  display block
  cursor pointer

.alert
  color $red !important 
  background-color $gray-blue !important 
  border 1px solid $red !important
  //background-color $red !important

.hide
  display none !important
.show
  display block !important

.container
   width 80%
   height 837px
   position relative
   color $white
   font-size 2em
   padding-top 2em

.button
   mask()
   @media screen and (max-width 526px)
     width 372px
   width 442px
   margin auto
   .session,.break
     mask()
     float left
     div
       border 1px solid $white
       padding 0px 10px 0px 10px
       margin 0 0 30px 0
     span
       border 1px solid $white
       color $white
       background-color $gray-blue
       float left
       padding: 0px 10px 0px 10px
     .session__plus, .break__plus 
       border-right 0
       margin-top: 6px
       -user-select: none
       position: relative;
       z-index: 1;
     .break__time, .session__time 
       background-color $white 
       color: $gray-blue 
       border-radius 5px 
       padding: 5px 15px 5px 15px
       cursor: text
       position: relative;
       z-index: 1;
     .session__minus, .break__minus 
       border-left 0
       padding: 0 14px 0 11px
       margin-top: 6px
       cursor: pointer
       position: relative;
       -user-select: none
       z-index: 1;
   .break
     float: right

 #clock,.time, .play, .pause
   font-size: 1em
   color $red
 .break-time 
   display: none
 .time 
   cursor: default
   position: relative
   z-index 0
   top: 64px
 .play
   position: absolute  
   margin-top: 147px
   margin-left: 191px;
   //display: none
 .pause
   position: absolute  
   margin-top: 147px
   margin-left: 179px
   display: none
 svg.arc , svg.arcAnim
   position: absolute
   top: 94px
   left: 50%
   transform: translateX(-50%)
   width: 328px
   height: 330px
   z-index: -1
   path
     transform translate(50%,50% )
     stroke: #fff
     stroke-width: 7
     fill: #2b2d42

 svg.arcAnim
   z-index: -1
   path
     transform translate(-53.4%,50% )
     stroke: $red 
     stroke-width: 8
     fill: transparent
.icon 
  display: inline-block
  color: #444444
  color $red 
  width: .6em
  height: 1em
  fill red
.icon-stop 
  color $red 
  font-size: 2em
  top: 77px
  left: 60px
  text-indent: 0
  position: relative
  display: none
  cursor: pointer
  animation: spin 8s linear infinite
  margin: 0
@keyframes spin {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
.pause 
  -webkit-animation-play-state: paused !important 
  -moz-animation-play-state: paused !important 
  -o-animation-play-state: paused !important
  animation-play-state: paused !important

footer
  display: block
  margin-top: 310px
  display: block
  div.thx
    display: block
  div
    font-size: 1.5rem
    text-align: center
    margin-bottom: 0
    display: inline
    .italic
      font-style italic
      display: inline
      cursor: default 
    .striked 
      text-decoration line-through
      display: inline
      cursor: default 

              
            
!

JS

              
                (function() {
  //timer
  let display = document.querySelector('.time'),anim, watch ,
  displayBreak = document.querySelector('.break-time'),watchBreak , animBreak,
  audio = new Audio('http://artot.net/sounds/win.mp3'), percentage,
    sessionTime = document.querySelector('.session__time ');
  // define function for setInterval
  function getSeconds(hour) {
    //console.log(min);
    if (hour < 10) {
      console.log(hour);
      return hour
    } else {
      let min = hour.textContent.split(':')
      return parseInt(min[0], 10)* 60
    }
    
  }
  // define function for setInterval
  function circularLoop(init, min, action) {
    let current = init;
    return function() {
      action(current);
      if (current - 1 === min) {
        current = min;
      } else if(current > 0){
        current--;
      }
    }
  }

  let orig = document.querySelector('.arcAnim path'), length=0, timer, pathLength= 472, distancePerPoint 
  watch = () => {
    let seconds, minutes;
      anim = setInterval(circularLoop(getSeconds(display) , 0, function(currSecond) {
      minutes = parseInt(currSecond  / 60, 10);
      seconds = parseInt(currSecond  % 60, 10);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      display.textContent = minutes + ":" + seconds;

      //svg
      distancePerPoint = 472 / getSeconds(sessionTime )
      length += distancePerPoint;
      orig.style.strokeDasharray = [length,pathLength].join(' ');
      console.log([length,pathLength].join(' '));

      if (currSecond === 0) {
        clearInterval(anim)
        watchBreak()
        audio.play();
        length=0
      }
      }), 1000);
  }
  watchBreak = () => {
    let seconds, minutes;
    animBreak = setInterval(circularLoop(getSeconds(displayBreak) , 0, function(currSecond) {
      minutes = parseInt(currSecond  / 60, 10);
      seconds = parseInt(currSecond  % 60, 10);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      display.textContent = minutes + ":" + seconds;
      if (currSecond === 0) {
        clearInterval(animBreak)
        audio.play();
      }
    }), 1000);
  }
  //END TIMER

  //Event + and -
  //
  let sessionPlus = document.querySelector('.session__plus'),
    sessionMinus = document.querySelector('.session__minus'),
    breakPlus = document.querySelector('.break__plus'),
    breakMinus = document.querySelector('.break__minus'),
    time = document.querySelector('.time'),
    breakTime = document.querySelector('.break-time'),
    play = document.querySelector('.play'),
    stop = document.querySelector('.icon-stop'),
    pause = document.querySelector('.pause')

  function previousMinus (e) {
    let prev= this.previousSibling,
      val = parseInt(prev.textContent, 10)
    if (val > 0) {
      prev.textContent--
      if (val === 1) {
        prev.classList.add('alert')
      }
    }
    if (!this.classList.contains('break__minus')) {
      time.textContent = prev.textContent + ':00'
      clearInterval(anim)
    } else{
      breakTime.textContent = prev.textContent + ':00'

    } 

    play.classList.add('show')
    play.classList.remove('hide')
    pause.classList.add('hide')
    pause.classList.remove('show')
    stop.classList.remove('show')
    stop.classList.add('hide')

    //svg
    length=0
    orig.style.strokeDasharray = 472
    orig.classList.add('hide')
    e.preventDefault();
  }
  function nextPlus(e) {
    let next = this.nextSibling
    let val = parseInt(next.textContent, 10)
    next.textContent++
    if (val === 0) {
      next.classList.remove('alert')
    }
    if (!this.classList.contains('break__plus')) {
      time.textContent = next.textContent + ':00'
      clearInterval(anim)
    } else{
      breakTime.textContent = next.textContent + ':00'
    } 
    play.classList.add('show')
    play.classList.remove('hide')
    pause.classList.add('hide')
    pause.classList.remove('show')
    stop.classList.remove('show')
    stop.classList.add('hide')

    //svg
    length=0
    orig.style.strokeDasharray = 472
    orig.classList.add('hide')
    e.preventDefault();
  }

  sessionMinus.addEventListener('click',previousMinus );
  sessionPlus.addEventListener('click', nextPlus);
  breakMinus.addEventListener('click',previousMinus );
  breakPlus.addEventListener('click', nextPlus);
  play.addEventListener('click', playPodomoro);
  pause.addEventListener('click', pausePodomoro);
  stop.addEventListener('click', stopPodomoro);

  function playPodomoro(e) {
    audio.play();
    watch(display)
    orig.classList.remove('hide')

    play.classList.add('hide')
    play.classList.remove('show')
    pause.classList.add('show')
    pause.classList.remove('hide')
    stop.classList.remove('hide')
    stop.classList.add('show')
    stop.classList.remove('pause')
  }
  function pausePodomoro(e) {
    clearInterval(anim)
    play.classList.add('show')
    play.classList.remove('hide')
    pause.classList.add('hide')
    pause.classList.remove('show')
    stop.classList.add('pause')

  }
  function stopPodomoro(e) {
    clearInterval(anim)
    clearInterval(animBreak)
    play.classList.add('show')
    play.classList.remove('hide')
    pause.classList.add('hide')
    pause.classList.remove('show')
    stop.classList.remove('show')
    stop.classList.add('hide')
    //time
    console.log(sessionTime);
    let sessionStop = sessionTime.innerHTML
    time.textContent = sessionStop  + ':00'
    //svg
    length=0
    orig.style.strokeDasharray = 472
    orig.classList.add('hide')
  }

}());//END


              
            
!
999px

Console