FCC Pomodoro Clock App

In this example below you will see how to do a FCC Pomodoro Clock App with some HTML / CSS and Javascript

Pomodoro clock app with mutable audio

Thumbnail
This awesome code was written by codefly0817, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright codefly0817 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FCC Pomodoro Clock App</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- HEADER -->
<div class="title">
  <h1>Pomodoro Clock App</h1>
</div>

<!-- STATUS TEXT -->
<div class="indicator-container">
  <p id="indicator">Indicate Session and Break Length then Click Start Button</p>
</div>

<!-- INPUTS -->
<form class="form-inline form-horizontal">
  <div class="session">
    <label for="input-session">Session Length:</label>
    <input type="number" class="form-control input" id="input-session" max="99" min="1" value="25"/><span> mins.</span>
  </div>
  <div class="break">
    <!-- Cannot find a way to align these 2 inputs so I'm going to use hidden text below -->
    <span class="to-hide">ii</span>
    <label for="input-break">Break Length:</label>
    <input type="number" class="form-control input" id="input-break" max="99" min="1" value="5" /><span> mins.</span>
  </div>
</form>

<!-- TIMER CLOCK -->
<div class="timer-container">
  <div class="time hour1"><p id="hour1"></p></div>
  <div class="time hour2"><p id="hour2"></p></div>
  <span>:</span>
  <div class="time min1"><p id="min1"></p></div>
  <div class="time min2"><p id="min2"></p></div>
  <span>:</span>
  <div class="time sec1"><p id="sec1"></p></div>
  <div class="time sec2"><p id="sec2"></p></div>
</div>

<!-- BUTTONS -->
<div class="btn-container">
  <button class="btn btn-primary btn-lg " id="start">START</button>
  <button class="btn btn-danger btn-lg" id="reset">RESET</button>
  <button class="btn btn-default btn-lg" id="volume"><i class="fa fa-volume-up"></i></button>
</div>

<!-- FOOTER -->
<div class="footer">
  <p>Powered by: Ambition. Created by: <a href="https://twitter.com/v2dAnL" target="_blank">v2danL</a>
</div> 

<!-- TEST 
<p id="testappend">Append here: <p> -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/codefly0817/fcc-pomodoro-clock-app-RWRNJP */
@import url(https://fonts.googleapis.com/css?family=Lily+Script+One);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
@import url(https://fonts.googleapis.com/css?family=Orbitron:400,900);
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

body {
  text-align: center;
  font-family: 'Ubuntu', Tahoma, Verdana, sans-serif;
  font-size: 3em;
  background-color: #111;
  text-shadow: 1px 1px 3px white;
  color: teal;
}

.title h1 {
  font-family: 'Lily Script One', Verdana, Tahoma, sans-serif;
  font-size: 2.8em;
  text-shadow: 0 0 50px #00dddd;
  color: black;
  
}

#indicator {
  margin: .8em 0 .5em 0;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px teal;
  color: #fff;
}

.form-container .break {
  margin-top: 1em;
}

/*to hide extra chars used to align inputs*/
.break .to-hide {
  visibility: hidden;
  cursor: pointer;
}

.input {
  font-size: 1em;
  height: 1.8em;
}

.form-inline .session {
  margin-bottom: .5em;
}

.timer-container {
  position: relative;
  font-family: 'Orbitron', Tahoma, Verdana, sans-serif;
  background-color: black;
  color: #00dddd;
  text-shadow: 0 0 35px #00dddd;
  display: inline-block;
  font-size: 3em;
  margin: .3em 0 .3em 0;
  border: 8px solid #222;
  width: 8em;
  border-radius: 50px;
}

.timer-container p,span {
  display: inline;  
}

.timer-container span:nth-of-type(1) {
  margin: 0 1em;
}

.timer-container span:nth-of-type(2) {
  margin: 0 1em;
}

.timer-container .time {
  display: inline-block;
  width: 2em;
  position: absolute;
}

.hour1 {
  left: 0;
}

.hour2 {
  left: .8em;
}

.min1 {
  left: 2.5em;
}

.min2 {
  left: 3.3em;
}

.sec1 {
  right: .8em;
}

.sec2 {
  right: 0;
}

.btn-container {
  margin-bottom: 1em;
  display: block;
}

.btn {
  margin-right: 1em;
}

#volume {
  background-color: #555;
  opacity: .8;
}

#volume:hover {
  opacity: 1;
}

.fa {
  color: white;
  width: 25px;
}

.fa-volume-off {
  margin-left: -9px;
  width: 34px;
}

.footer p {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  color: white;
  text-shadow: 0 0 10px #aaa;
  text-align: left;
  margin-left: 7px;
}

.footer a:hover {
  text-decoration: none;
  text-shadow: 0 0 10px teal;
}



/*Downloaded from https://www.codeseek.co/codefly0817/fcc-pomodoro-clock-app-RWRNJP */
$(document).ready(function() {
    
  //Prevents typing on the Form Input
  $("[type='number']").keypress(function (evt) {
    evt.preventDefault();
  });

  //If inputs are deleted and left empty
  $("#input-session").on('focusout', function() {
    if($(this).val() == '') {
      $(this).val(25);
    }
  });
  
  $("#input-break").on('focusout', function() {
    if($(this).val() == '') {
      $(this).val(5);
   }
  });
  
  showTimer();
  
});

//Timer Audio
var clockTick = document.createElement('audio');
var changeModeAlert = document.createElement('audio');
changeModeAlert.setAttribute('src', 'http://www.threecaster.com/wavy/WARNING1.wav');
clockTick.setAttribute('src', 'http://www.wavlist.com/soundfx/020/clock-tick1.wav');

clockTick.addEventListener("load", function() {
  clockTick.play();
}, true);

changeModeAlert.addEventListener("load", function() {
  changeModeAlert.play();
}, true);

  
/* Timer Algorithm */  
  //Timer Data
 var timeSecond1 = 0, timeSecond2 = 0, timeMinute1 = 0, timeMinute2 = 0,
timeHour1 = 0, timeHour2 = 0,
timerActive = false, sessionActive = false, muteSound = false;
      
  //Show Timer clock
function showTimer() {
  $('#hour1').html(timeHour1);
  $('#hour2').html(timeHour2);
  $('#min1').html(timeMinute1);
  $('#min2').html(timeMinute2);
  $('#sec1').html(timeSecond1);
  $('#sec2').html(timeSecond2);
};

  //Reset Algo
function resetTimer() {  
  timerActive = false;
  clearInterval(timer);
  $('#start').html('START');
  
  $('#indicator').html('Indicate Session and Break Length then Click Start Button')
  sessionActive = false;
  timeHour1 = 0; timeHour2 = 0;
  timeMinute1 = 0; timeMinute2 = 0;
  timeSecond1 = 0; timeSecond2 = 0;
  showTimer();
};
  
//Reset button
$('#reset').click(function() {
  resetTimer();
});

//Reset timer when Inputs are changed
$('#input-session, #input-break').on('click', function() {
  resetTimer();
});

//Timer
  $('#start').click(function() {
    //var timeInputTest = $("#input-session").val().charAt(1);
    //timeSecond2 = timeInputTest;
    if(timerActive) {
      timerActive = false;
      clearInterval(timer);
      $('#start').html('START');
    } else {
      timerActive = true;
      $('#start').html('PAUSE');
      
      timer = setInterval(function() {
        if(muteSound == false) {
          clockTick.play();
        };
        if(timeSecond2 > 0) {
          timeSecond2--;
        } else {
          if(timeHour1 > 0 || timeHour2 > 0 || timeMinute1 > 0 || timeMinute2  > 0 || timeSecond1 > 0) {
            timeSecond2 = 9;
            if(timeSecond1 > 0) {
              timeSecond1--;
            } else {
              timeSecond1 = 5;
              if(timeMinute2 > 0) {
                timeMinute2--;
              } else {
                timeMinute2 = 9;
                if(timeMinute1 > 0) {
                  timeMinute1--;
                } else {
                  timeMinute1 = 5;
                  if(timeHour2 > 0) {
                    timeHour2--;
                  } else {
                    timeHour2 = 9;
                    if(timeHour1 > 0) {
                      timeHour1--;
                    }
                  }
                }
              }
            }
          } else {
//Timer Inputs
var sessionMinute1 = $('#input-session').val().charAt(0),
    sessionMinute2 = $('#input-session').val().charAt(1),
    sessionMinuteSingle = $('#input-session').val(),
    breakMinute1 = $('#input-break').val().charAt(0),
    breakMinute2 = $('#input-break').val().charAt(1),
    breakMinuteSingle = $('#input-break').val(),
      
    splitMinute = ($('#input-session').val() - 60).toString(),
    splitBreakMinute = ($('#input-break').val() - 60).toString();
            
            if(sessionActive) {
              sessionActive = false;
              $('#indicator').html('On Break');
              if($('#input-break').val() <= 9) {
                timeMinute1 = 0;
                timeMinute2 = breakMinuteSingle;
              } else if($('#input-break').val() > 59) {
                if(($('#input-break').val() - 60) <= 9) {
                timeMinute1 = 0;
                timeMinute2 = splitBreakMinute;
                timeHour2 = 1;
                } else {
                timeMinute1 = splitBreakMinute.charAt(0);
                timeMinute2 = splitBreakMinute.charAt(1);
                timeHour2 = 1;
                  }
                } else {
              timeMinute1 = breakMinute1;
              timeMinute2 = breakMinute2;
              timeSecond1 = 0;
              timeSecond2 = 0;
              }
            } else {
              sessionActive = true;
              $('#indicator').html('On Session');
              if($('#input-session').val() <= 9) {
                timeMinute1 = 0;
                timeMinute2 = sessionMinuteSingle;
              } else if($('#input-session').val() > 59) {
                if(($('#input-session').val() - 60) <= 9) {
                timeMinute1 = 0;
                timeMinute2 = splitMinute;
                timeHour2 = 1;
                } else {
                timeMinute1 = splitMinute.charAt(0);
                timeMinute2 = splitMinute.charAt(1);
                timeHour2 = 1;
                }
              } else {
              timeMinute1 = sessionMinute1;
              timeMinute2 = sessionMinute2;
              timeSecond1 = 0;
              timeSecond2 = 0;
              }
            }
          }
        }
        
        if(timeHour2 == 0 && timeHour1 == 0 && timeMinute2 == 0 && timeMinute1 == 0 && timeSecond2 == 0 && timeSecond1 == 0) {
          changeModeAlert.play();
        }
        
        showTimer();
      }, 1000)
        
      }
  });

//Toggle Sound Icon
$('#volume').click(function() {
  
  if(muteSound) {
    muteSound = false;
    $('.fa').removeClass('fa-volume-off');
    $('.fa').addClass('fa-volume-up');
  } else {
    muteSound = true;
    $('.fa').removeClass('fa-volume-up');
    $('.fa').addClass('fa-volume-off');
  }
  
});

Comments

More from codefly0817

A Pen by Val Matta

A Pen by Val Matta

By codefly0817
Local Weather App

Local Weather App

By codefly0817
Some Timer

Some Timer

By codefly0817
FCC Pomodoro Clock App

FCC Pomodoro Clock App

By codefly0817

You Might Also Like

Twitch.TV

Twitch.TV

By thatjeannie
A Pen by David Pait

A Pen by David Pait

By davidpait
Recente com Masonry - compacta

Recente com Masonry - compacta

By aguadecoco
CSS 3D transition experiment

CSS 3D transition experiment

By blazeeboy
India landing page animation

India landing page animation

By team/digitalocean
ARIA Menu Toggle Prototype

ARIA Menu Toggle Prototype

By cjcheshire
Wooden Mega Menu Navigation

Wooden Mega Menu Navigation

By JFarrow
Pomodoro Timer

Pomodoro Timer

By IzunaGaiden
© 2018 - Copyright CodeSeek.co
contact email