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