FreeCodeCamp - Pomodoro Clock

Developer
Jason Thomas
Size
2,959 Kb
Views
46,552
  1. FreeCodeCamp - Pomodoro Clock Previews
  2. FreeCodeCamp - Pomodoro Clock HTML Codes
  3. FreeCodeCamp - Pomodoro Clock CSS Codes
  4. FreeCodeCamp - Pomodoro Clock JS Codes

How do I make an freecodecamp - pomodoro clock?

What is a freecodecamp - pomodoro clock? How do you make a freecodecamp - pomodoro clock? This script and codes were developed by Jason Thomas on 14 September 2022, Wednesday.

FreeCodeCamp - Pomodoro Clock Previews
IQ Test

FreeCodeCamp - Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>freeCodeCamp - Pomodoro Clock</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="jquery-script-clear"> <h1 id="time" class="text-center display-2">25</h1> <div id="workTime"><span class="label">Work: </span> <div class="buttonAdj"> <button id="workPlus" type="button" class="btn plusMinus">+ <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> <span id="workMins"></span> <button id="workMinus" type="button" class="btn plusMinus"> <span class="glyphicon glyphicon-minus" aria-hidden="true">-</span> </button> </div> </div> <div id="breakTime"><span class="label">Break: </span> <div class="buttonAdj"> <button id="workPlus" type="button" class="btn plusMinus">+ <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> <span id="breakMins"></span> <button id="workMinus" type="button" class="btn plusMinus"> <span class="glyphicon glyphicon-minus" aria-hidden="true">-</span> </button> </div> </div> <div> <div id="startStop"> <button id="start" type="button" class="btn startStopBtn"> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Start </button> <button id="resume" type="button" class="btn startStopBtn"> <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Resume </button> <button id="stop" type="button" class="btn startStopBtn"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> Pause</button> <button id="reset" type="button" class="btn startStopBtn"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Reset </button> </div> </div>
</div>
<!--end--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp - Pomodoro Clock - Script Codes CSS Codes

body { background-image:url(https://dl.dropboxusercontent.com/s/7gnou6llvsucao9/white_carbonfiber.png?dl=0);
}
#top-header {
margin-top: 30px;
}
#session button { border-style:none;
}
#resume, #stop { display: none; }
.plusMinus { background-color: transparent; border-style: none; float:right; padding-top: 0px;
}
#workTime, #breakTime, #startStop { width:210px; margin-left:auto; margin-right:auto; height:60px; font-size:1.9em; line-height:20px;
}
.label { float:left;
}
.buttonAdj { float:right; width:120px;
}
#workMins, #breakMins { float:right;
}
.startStopBtn { background-color: transparent; border-style: none;
}
#start, #resume, #stop { float:left; padding:0px;
}
#reset { float:right; padding:0px; margin-right:15px;
}

FreeCodeCamp - Pomodoro Clock - Script Codes JS Codes

var workMins = 25;
var isPaused = false;
var timerId = 25;
var breakMins = 5;
var isWork = true;
var isBreak = false;
$("#workMins").text(workMins);
$("#breakMins").text(breakMins);
function startWork(duration, display) { var timer = duration, workMins, seconds; timerId = setInterval(function () { if(!isPaused && isWork){ workMins = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); workMins = workMins < 10 ? "0" + workMins : workMins; seconds = seconds < 10 ? "0" + seconds : seconds; display.text(workMins + ":" + seconds); if (--timer < 0) { //$("#time").empty(); clearInterval(timerId); isWork = false; isBreak = true; startPomodoro(breakMins); //timer = breakMins; //$("#stop").hide(); //$("#resume").hide(); } } if (!isPaused && isBreak) { breakMins = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); breakMins = breakMins < 10 ? "0" + breakMins : breakMins; seconds = seconds < 10 ? "0" + seconds : seconds; display.text(breakMins + ":" + seconds); if (--timer < 0) { clearInterval(timerId); isWork = true; isBreak = false; startPomodoro(workMins); //timer = breakMins; //$("#stop").hide(); //$("#resume").hide(); } } }, 1000);
}
function startPomodoro(min){ var fiveMinutes = 60 * min, display = $('#time'); startWork(fiveMinutes, display);
}
$("#workMinus").on("click", function(){ if(workMins > 1){ workMins -= 1; $("#workMins").text(workMins); $("#time").text(workMins); }
});
$("#workPlus").on("click", function(){ if( workMins < 45){ workMins += 1; $("#workMins").text(workMins); $("#time").text(workMins); }
});
$("#start").on("click", function(){ $("#workMinus, #workPlus").attr("disabled", true); $(this).hide(); isPaused = false; startPomodoro(workMins); $("#stop").show();
});
//Stop button
$("#stop").on("click", function(){ $(this).hide(); $("#resume").show(); isPaused = !isPaused;
});
//Resume button
$("#resume").on("click", function(){ $(this).hide(); $("#stop").show(); isPaused = !isPaused;
});
//Reset button
$("#reset").on("click", function(){ $("#workMinus, #workPlus").attr("disabled", false); $("#stop").hide(); $("#resume").hide(); $("#start").show(); clearInterval(timerId); $("#time").text(workMins);
});
FreeCodeCamp - Pomodoro Clock - Script Codes
FreeCodeCamp - Pomodoro Clock - Script Codes
Home Page Home
Developer Jason Thomas
Username samoht513
Uploaded September 14, 2022
Rating 3
Size 2,959 Kb
Views 46,552
Do you need developer help for FreeCodeCamp - Pomodoro Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jason Thomas (samoht513) Script Codes
Name
FreeCodeCamp - Tic Tac Toe Game
FreeCodeCamp - Twitchtv API
FreeCodeCamp - Local Weather App
FreeCodeCamp - Random Quote Generator
FreeCodeCamp - Javascript Calculator
FreeCodeCamp - Wikipedia Viewer
Html - canvas
FreeCodeCamp - Personal Portfolio
FreeCodeCamp - Simon Game
Freecodecamp - Tribute Page
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!