Created
October 27, 2018 16:14
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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) | |
} | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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