Skip to content

Instantly share code, notes, and snippets.

@pulamusic
Created October 27, 2018 16:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pulamusic/35d474b4d4d1170aec6b699ab0cb35e5 to your computer and use it in GitHub Desktop.
Save pulamusic/35d474b4d4d1170aec6b699ab0cb35e5 to your computer and use it in GitHub Desktop.
jQuery, html, and css code for a pomodoro clock. It doesn't work as is.
<!doctype html>
<html lang="en-us">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pomodoro Clock</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700" rel="stylesheet">
<!-- local stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- favicon -->
<link rel="icon" href="images/favicon.ico" type="images/x-icon">
</head>
<body>
<div class="audio">
<p>gong sound</p>
<!-- audio files -->
<audio id="#gong" preload="auto" autoplay="autoplay" controls>
<source src="audio/metal-gong.mp3" type="audio/mpeg">
<source src="audio/metal-gong.wav" type="audio/wav">
</audio>
</div>
<div class="container-fluid">
<div class="jumbotron">
<h1>Pomodoro Clock</h1>
<h2>a freeCodeCamp front-end development project</h2>
</div>
<div class="pomodoro">
<div class="display"></div>
<div class="timer">
<h1 id="title-timer"><u>session time</u></h1>
<button class="btn btn-default btn-lg" id="subtract-1-clock">-</button>
<h2 id="num-clock">25</h2>
<button class="btn btn-default btn-lg" id="add-1-clock">+</button>
<button class="btn btn-default btn-lg" id="reset-clock">reset</button>
</div>
<div class="break">
<h1 id="title-break"><u>break time</u></h1>
<button class="btn btn-default btn-lg" id="subtract-1-break">-</button>
<h2 id="num-break">5</h2>
<button class="btn btn-default btn-lg" id="add-1-break">+</button>
</div>
<button class="btn btn-default btn-lg" id="start-btn">start</button>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- freeCodeCamp testing script -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!-- local script -->
<script src="main.js"></script>
</body>
</html>
$(document).ready(function() {
const gong = $("audio#gong")[0]
let countClock = parseInt($("#num-clock").html())
let countBreak = parseInt($("#num-break").html())
// hide audio element
$(".audio").hide()
// hide reset button onload
$("#reset-clock").hide()
// start button for session timer
$("#start-btn").on("click", function() {
const counter = setInterval(timer, 1000)
countClock *= 60;
// NOTE TO SELF: This function is quite wonky. It doesn't count down to zero, and it doesn't play the sound file. Bummer dude.
function timer() {
// hide extra clock elements
$("#start-btn, #subtract-1-clock, #add-1-clock, .break").hide()
// increase font size for clock
$("#num-clock").addClass("bigger")
// clock decrements
countClock -= 1
// when clock reaches zero
if (countClock === 0) {
// clear the counter
clearInterval(counter)
// play the sound file
gong.get(0).play()
// decrease font size for clock
$("#num-clock").removeClass("bigger")
// start breakTimer
const startBreak = setInterval(breakTimer, 1000)
}
if (countClock % 60 >= 10) {
$("#num-clock").html(Math.floor(countClock / 60) + ":" + countClock % 60)
} else {
$("#num-clock").html(Math.floor(countClock / 60) + ":" + "0" + countClock % 60)
}
}
function breakTimer() {
// hide session time
$(".timer").hide()
// show the break timer
$(".break").show()
// increase font size for break timer
$("#num-break").addClass("bigger")
// decrement break timer
countBreak -= 1
if (countBreak === 0) {
clearInterval(startBreak)
gong.get(0).play()
// decrease font size for break timer
$("#num-break").removeClass("bigger")
// show session time
$(".timer").hide()
// show reset button
$("#reset-clock").show()
}
if (countBreak % 60 >= 10) {
$("#num-break").html(Math.floor(countBreak / 60) + ":" + countBreak % 60)
} else {
$("#num-break").html(Math.floor(countBreak / 60) + ":" + "0" + countBreak % 60)
}
}
})
// reset button
$("#reset-clock").on("click", function() {
countClock = 25
countBreak = 5
$("#num-clock").html(countClock)
$("#num-break").html(countBreak)
})
// set decrement session time
$("#subtract-1-clock").on("click", function() {
if (countClock > 1) {
countClock -= 1
$("#num-clock").html(countClock)
}
})
// set increment session time
$("#add-1-clock").on("click", function() {
if (countClock < 120) {
countClock += 1
$("#num-clock").html(countClock)
}
})
// set decrement break time
$("#subtract-1-break").on("click", function() {
if (countBreak > 1) {
countBreak -= 1
$("#num-break").html(countBreak)
}
})
// set increment break time
$("#add-1-break").on("click", function() {
if (countBreak < 30) {
countBreak += 1
$("#num-break").html(countBreak)
}
})
})
body {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
background-image: url("images/oriental.png");
background-repeat: repeat;
}
.jumbotron {
text-align: center;
margin: 0 50px 30px 50px;
}
.jumbotron h1 {
font-size: 3em;
}
.jumbotron h2 {
font-size: 1.3em;
}
.pomodoro {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 10px;
width: 60%;
text-align: center;
background-color: rgba(132, 112, 67, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.pomodoro h2 {
display: inline;
margin: 10px;
}
.timer, .break {
border: 1px solid #000000;
border-radius: 20px;
margin: 5px;
padding: 10px;
}
.bigger {
font-size: 4em;
}
.btn {
font-weight: bold;
margin: 10px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.btn:active {
outline: none;
}
#start-btn {
margin: 25px 0 30px 0;
}
.audio {
text-align: center;
margin: 10px auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment