FreeCodeCamp - Pomodoro Clock

Developer
Veronika
Size
4,937 Kb
Views
20,240
  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?

Free Code Camp project - Pomodoro Clock. A simple timer where the user can select session and break length. SVG tomato. . What is a freecodecamp - pomodoro clock? How do you make a freecodecamp - pomodoro clock? This script and codes were developed by Veronika on 30 November 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> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Mogra" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="pomodoro__container" viewbox="0 -40 400 400"> <defs> <linearGradient id="filler" x2="0%" y2="100%"> <stop id="backgroundFiller" offset="0%" stop-color="rgb(250, 100, 100)" /> <stop offset="0%" stop-color="rgb(250, 50, 50)" /> </linearGradient> <filter id="svgBlur"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> </defs> <ellipse class="pomodoro__shadow" cx="200" cy="280" rx="110" ry="30"/> <ellipse class="pomodoro__tomato pomodoro__tomato--fill" cx="200" cy="170" rx="150" ry="125"/> <ellipse class="pomodoro__leaf" cx="200" cy="78" rx="10" ry="40" transform="rotate(35 190 45)"/> <ellipse class="pomodoro__leaf" cx="200" cy="78" rx="10" ry="40" transform="rotate(-35 210 45)"/> <ellipse class="pomodoro__leaf" cx="240" cy="53" rx="40" ry="10" /> <ellipse class="pomodoro__leaf" cx="160" cy="53" rx="40" ry="10" /> <rect class="pomodoro__stalk" x="190" y="30" width="20" height="25" rx="5" ry="5"/> <text class="time" x="88" y="200" id="minutes">25</text> <text class="time" x="185" y="200">:</text> <text class="time" x="215" y="200" id="seconds">00</text> <text id="breakText" class="break-text" x="165" y="135">Break</text>
</svg>
<div class="input-container"> <p class="label">Session length: <span id="sessionTimeValue">25</span> min </p> <input id="sessionTime" type="range" min="1" max="40" value="25" /> <p class="label">Break length: <span id="breakTimeValue">5</span> min </p> <input id="breakTime" type="range" min="1" max="10" value="5" /> <button id="restart">Restart</button>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp - Pomodoro Clock - Script Codes CSS Codes

html,body { background-color: rgb(210, 235, 255);
}
.pomodoro__container { display: block; max-width: 100%; min-width: 200px; height: 350px; margin: auto; margin-bottom: 10px; -webkit-transform: scale(1.2); transform: scale(1.2);
}
.pomodoro__container--shake { -webkit-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
@-webkit-keyframes shake { 10%, 90% { -webkit-transform: scale(1.2) translate3d(-1px, 0, 0); transform: scale(1.2) translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: scale(1.2) translate3d(2px, 0, 0); transform: scale(1.2) translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: scale(1.2) translate3d(-4px, 0, 0); transform: scale(1.2) translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: scale(1.2) translate3d(4px, 0, 0); transform: scale(1.2) translate3d(4px, 0, 0); }
}
@keyframes shake { 10%, 90% { -webkit-transform: scale(1.2) translate3d(-1px, 0, 0); transform: scale(1.2) translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: scale(1.2) translate3d(2px, 0, 0); transform: scale(1.2) translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: scale(1.2) translate3d(-4px, 0, 0); transform: scale(1.2) translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: scale(1.2) translate3d(4px, 0, 0); transform: scale(1.2) translate3d(4px, 0, 0); }
}
.pomodoro__shadow { fill: rgba(100, 100, 100, 0.2); -webkit-filter: url('#svgBlur'); filter: url('#svgBlur')
}
.pomodoro__leaf, .pomodoro__stalk { fill: rgb(50, 150, 80);
}
.pomodoro__tomato--fill { fill: url('#filler');
}
.time { text-align: center; fill: rgb(255, 255, 255); font-family: 'Mogra', cursive; font-size: 5em; letter-spacing: 3px;
}
.break-text { text-transform: uppercase; fill: rgb(255, 255, 255); font-family: 'Mogra', cursive; font-size: 1.5em; display: none;
}
input[type=range] { -webkit-appearance: none; border-radius: 10px; margin: 0; height: 30px; width: 100%; border: 4px solid rgb(150, 150, 150); background-color: #fff;
}
input[type=range]:focus { outline: none;
}
input[type=range]::-moz-range-track { border-radius: 10px; margin: 0; height: 30px; border: 4px solid rgb(150, 150, 150); width: 100%; background-color: rgb(255, 255, 255);
}
input[type='range']::-moz-focus-outer { border: 0;
}
input[type=range]::-webkit-slider-thumb {	-webkit-appearance: none;	background-color: rgb(255, 255, 255);	border: 4px solid rgb(150, 150, 150);	width: 40px;	height: 40px;	border-radius: 20px;	cursor: pointer;
}
input[type=range]::-moz-range-thumb { background: #ecf0f1; border: 4px solid rgb(150, 150, 150); width: 40px; height: 40px; border-radius: 20px; cursor: pointer;
}
.input-container { width: 60%; min-width: 200px; margin: auto; font-family: 'Mogra', cursive; font-size: 1.2em;
}
@media (max-width: 600px) { .input-container { width: 95%; }
}
.label { width: 100%; color: rgb(100, 100, 100); text-align: center; letter-spacing: 0.1em; padding-top: 20px; clear: both;
}
button { font-family: 'Mogra', cursive; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.15em; height: 40px; line-height: 40px; clear: both; width: 100%; border: none; border-radius: 10px; margin-top: 40px; margin-bottom: 60px; background-color: rgb(50, 150, 80); color: rgb(255, 255, 255);
}
button:focus { outline: none;
}
button:active { border: 2px solid;
}
*, *:before, *:after { box-sizing: border-box;
}

FreeCodeCamp - Pomodoro Clock - Script Codes JS Codes

'use strict';
var sessionTime = 25 * 60; //seconds
var breakTime = 5 * 60; //seconds
var currentRunning = 'session';
var timeout = undefined;
var sessionColorLight = 'rgb(250, 100, 100)';
var sessionColorDark = 'rgb(250, 50, 50)';
var breakColorLight = 'rgb(255, 200, 100)';
var breakColorDark = 'rgb(255, 179, 26)';
function setColor(color1, color2) { var gradientstops = $('#filler').find('stop'); $(gradientstops[0]).attr('stop-color', color1); $(gradientstops[1]).attr('stop-color', color2);
}
function fillTomato(amount) { var bg = $('#backgroundFiller'); bg.attr('offset', 100 - amount + '%');
}
function showSessionTomato() { $('#breakText').hide(); setColor(sessionColorLight, sessionColorDark);
}
function showBreakTomato() { $('#breakText').show(); setColor(breakColorLight, breakColorDark);
}
function timer(remainingTime, totalTime) { timeout = setTimeout(function () { if (remainingTime >= 0) { updateTime(remainingTime); fillTomato((totalTime - remainingTime) * 100 / totalTime); timer(remainingTime - 1, totalTime); } else { switchBetweenSessionAndBreak(); } }, 1000);
}
function startSession() { $('.pomodoro__container').on('animationend', function () { $('.pomodoro__container--shake').removeClass('pomodoro__container--shake'); showSessionTomato(); }); $('.pomodoro__container').addClass('pomodoro__container--shake'); currentRunning = 'session'; timer(sessionTime, sessionTime);
}
function startBreak() { $('.pomodoro__container').on('animationend', function () { $('.pomodoro__container--shake').removeClass('pomodoro__container--shake'); showBreakTomato(); }); $('.pomodoro__container').addClass('pomodoro__container--shake'); currentRunning = 'break'; timer(breakTime, breakTime);
}
function switchBetweenSessionAndBreak() { if (currentRunning === 'session') { startBreak(); } else { startSession(); }
}
function prependZero(number) { if (number < 10) { return '0' + number; } else { return number; }
}
function updateTime(remainingTime) { var remainingMinutes = undefined, remainingSeconds = undefined; remainingSeconds = prependZero(remainingTime % 60); remainingMinutes = prependZero(Math.floor(remainingTime / 60)); $('#minutes').text(remainingMinutes); $('#seconds').text(remainingSeconds);
}
function restartPomodoro() { clearTimeout(timeout); currentRunning = 'session'; timer(sessionTime, sessionTime); showSessionTomato();
}
timer(sessionTime, sessionTime);
$('input').on('input', function () { $(this).prev('p').find('span').text(this.value); sessionTime = $('#sessionTimeValue').text() * 60; breakTime = $('#breakTimeValue').text() * 60;
});
$('#restart').click(restartPomodoro);
FreeCodeCamp - Pomodoro Clock - Script Codes
FreeCodeCamp - Pomodoro Clock - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 4,937 Kb
Views 20,240
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!

Veronika (ivhed) Script Codes
Name
FreeCodeCamp - Tribute Page
FreeCodeCamp - Twitch.tv
React Pagination
FreeCodeCamp - Simon Game
FreeCodeCamp - Tic Tac Toe Game
FreeCodeCamp - Markdown Previewer
CSS Course - Build-a-Kitty Workshop
FreeCodeCamp - Javascript Calculator
SVG Snowflakes
FreeCodeCamp - Local Weather
Create amazing Facebook ads 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!