A Pen by Pappu Kumar Pashi on CodePen.
Created
August 24, 2020 21:28
-
-
Save PappuKP/8f24f2f070d3a0bd9ac7e4f476cb6310 to your computer and use it in GitHub Desktop.
CodePen Home Build a Pomodoro Clock (FreeCodeCamp)
This file contains hidden or 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
| <html> | |
| <head> | |
| <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | |
| <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> | |
| <audio> | |
| <source src="http://www.myinstants.com/media/sounds/alert-hq.mp3"></source> | |
| </audio> | |
| </head> | |
| <body> | |
| <h1>FreeCodeCamp</h1> | |
| <h3>Pomodoro Clock</h3> | |
| <div class='timers'> | |
| <div class='break'> | |
| <p>Break Length</p> | |
| <div> | |
| <button class='in' id='minusBreak'>-</button> | |
| <p class='in' id='break'>5</p> | |
| <button class='in' id='plusBreak'>+</button> | |
| </div> | |
| </div> | |
| <div class='session'> | |
| <p>Session Length</p> | |
| <div> | |
| <button class='in' id='minusCount'>-</button> | |
| <p class='in' id='count'> 25 </p> | |
| <button class='in' id='plusCount'>+</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='clock' id='grad'> | |
| <p class='title'>Session</p> | |
| <p class='timer'>25</p> | |
| </div> | |
| <p>To start the countdown click the clock!</p> | |
| <p>Pause and unpause by tapping the clock!</p> | |
| <p>To reset the clock, choose your new times when the clock is paused and then click the clock!</p> | |
| </body> | |
| </html> |
This file contains hidden or 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(){ | |
| var audio = $("audio")[0]; | |
| var countTime = 25; | |
| var breakTime = 5; | |
| //use this to see if we can change times on pause | |
| var pause = false; | |
| var seconds = 0; | |
| var minutes = 25; | |
| //global interval variable | |
| var counting; | |
| $('.timer').html(minutes + ":00"); | |
| function countdown(){ | |
| if(minutes === 0 && seconds === 1){ | |
| //play the sound on both | |
| audio.play(); | |
| } | |
| if(minutes === 0 && seconds === 0){ | |
| if($('.title').text() === 'Session'){ | |
| $('.title').text('Break'); | |
| minutes = breakTime; | |
| $('.timer').html(minutes + ":0" + seconds); | |
| } | |
| else if($('.title').text() === 'Break'){ | |
| $('.title').text('Session'); | |
| minutes = countTime; | |
| $('.timer').html(minutes + ":0" + seconds); | |
| } | |
| } | |
| else{ | |
| if(seconds === 0){seconds = 60; minutes--} | |
| seconds--; | |
| if(seconds < 10){$('.timer').html(minutes + ":0" + seconds);} | |
| else{ | |
| $('.timer').html(minutes + ":" + seconds); | |
| } | |
| } | |
| } | |
| //for all, if we are paused, change our timer displays and reset text so clock is completely reset | |
| $('#minusBreak').click(function(){ | |
| if(pause === false){ | |
| if(breakTime > 1){breakTime--; $("#break").html(breakTime); $('.title').text('Session'); $(".timer").html(countTime + ":00"); | |
| //reset times | |
| seconds = 0; | |
| minutes = countTime;} | |
| } | |
| }); | |
| $('#plusBreak').click(function(){ | |
| if(pause === false){ | |
| breakTime++; $("#break").html(breakTime); | |
| $('.title').text('Session'); | |
| $(".timer").html(countTime + ":00"); | |
| //reset times | |
| seconds = 0; | |
| minutes = countTime; | |
| } | |
| }); | |
| $('#minusCount').click(function(){ | |
| if(pause === false){ | |
| if(countTime > 1){countTime--; $("#count").html(countTime); $(".timer").html(countTime + ":00"); $('.title').text('Session'); | |
| } | |
| //reset times | |
| seconds = 0; | |
| minutes = countTime; | |
| } | |
| }); | |
| $('#plusCount').click(function(){ | |
| if(pause === false){ | |
| countTime++; $("#count").html(countTime); | |
| $(".timer").html(countTime + ":00"); | |
| $('.title').text('Session'); | |
| //reset times | |
| seconds = 0; | |
| minutes = countTime; | |
| } | |
| }); | |
| $('.clock').click(function(){ | |
| //begin countdown function, call it every sec | |
| if(pause === false){ | |
| counting = setInterval(countdown, 1000); | |
| pause = true; | |
| } | |
| else if(pause === true){ | |
| clearInterval(counting); | |
| pause = false; | |
| } | |
| }); | |
| }); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or 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{ | |
| text-align: center; | |
| margin: 0 auto; | |
| font-family: Montserrat; | |
| background-color: #22262B; | |
| color: white; | |
| } | |
| .clock{ | |
| height: 300px; | |
| width: 300px; | |
| margin: 20px auto; | |
| border: 2px solid #22262B; | |
| box-shadow: 0 0 0px 2px SkyBlue; | |
| border-radius: 100%; | |
| cursor: pointer; | |
| } | |
| #grad { | |
| background: -webkit-gradient(linear, top, bottom, color-stop(100%,#22262B), color-stop(40%,#00F)); | |
| background: -moz-linear-gradient(top center, #22262B 100%, #00F 40%); | |
| background: -o-linear-gradient(top, #22262B 100%, #00F 40%); | |
| background: linear-gradient(to bottom, #22262B 100%, #00F 0%); | |
| } | |
| h1{ | |
| font-size: 60px; | |
| font-family: Pacifico; | |
| } | |
| h3{ | |
| font-size: 40px; | |
| } | |
| .timers div{ | |
| display: inline-block; | |
| margin: 0px 20px; | |
| } | |
| .in{ | |
| display: inline-block; | |
| margin: 5px; | |
| } | |
| button{ | |
| color: white; | |
| background-color: #22262B; | |
| border:0; | |
| outline: 0; | |
| } | |
| button:hover{ | |
| cursor: pointer; | |
| } | |
| #break, #count, button{ | |
| font-size: 40px; | |
| } | |
| .title, .timer{ | |
| font-size: 50px; | |
| margin-top: 60px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment