Pomodoro

Developer
Joseph1401
Size
2,758 Kb
Views
38,456
  1. Pomodoro Previews
  2. Pomodoro HTML Codes
  3. Pomodoro CSS Codes
  4. Pomodoro JS Codes

How do I make an pomodoro?

What is a pomodoro? How do you make a pomodoro? This script and codes were developed by Joseph1401 on 16 September 2022, Friday.

Pomodoro Previews
IQ Test

Pomodoro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="row content"> <h1 class="title">Clock</h1> <div class="content"> <div class="weather"> <div class="clock-fields"> <div class="row"> <div class="label"> <p>Minutes:</p> </div> <div class="field"> <input class="min-input" type="text" /> </div> </div> <div class="row"> <div class="label"> <p>Seconds:</p> </div> <div class="field"> <input class="sec-input" type="text" /> </div> </div> <div class="row"> <div class="wide-field"> <input type="button" class="start-btn" value="Sart"/> </div> </div> </div> <canvas class="conditions" id="clockCanvas"></canvas> <div class="temp"></div> </div> </div> </div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro - Script Codes CSS Codes

.title{ font-weight: 900; color: darkgrey; text-shadow: 5px 2px #828080, 4px 1.5px #828080, 3px 1px #828080, 1px 0.5px #828080; font-size: 6em; background-color: #d4efcf;
}
.field > *{ color: black; width:100%; border-radius: 10px;
}
.label > *{ width:100%; color: black;
}
.wide-field{ width:100%;
}
.wide-field > *{ width: 100%; color:black; border-radius: 10px;
}
.clock-fields{ padding-left: 30px;
}
.row{ width:100%;
}
.row > *{ display:inline-block;
}
.label{ width:30%;
}
.field{ width:66%;
}
.weather-icon{ min-height:14em;
}
.weather { text-align: center; color: white; background-color: #d4efcf; padding: 20px; border-radius: 50px; min-height: 20em; min-width: 20em;
}
.weather-icon{ display:flex; align-items: center; justify-content: center; justify min-width: 100%; height: 80%;
}
.weather{ display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.content { display: flex; flex-direction: column; background-color: #d4efcf; width: 100vw; hieght: 100%; align-items: center; justify-content: center;
}
body{ background-color: #d4efcf;
}

Pomodoro - Script Codes JS Codes

$(function(){ var c =document.getElementById("clockCanvas"); var ctx = c.getContext("2d"); drawFace(ctx); $('.start-btn').on('click',function(){ $("input").prop('disabled', true); var c =document.getElementById("clockCanvas"); var ctx = c.getContext("2d"); drawFace(ctx); var inc = ($('.min-input').val() != '' ? parseInt($('.min-input').val())*60 : 0 ); inc = inc + ($('.sec-input').val() != '' ? parseInt($('.sec-input').val()) : 0 ); console.log(inc); time(ctx,inc,1); });
});
function drawFace(ctx){ ctx.arc(150,75,70,0,2*Math.PI); ctx.lineWidth = 5; ctx.strokeStyle = 'white'; ctx.stroke(); ctx.beginPath();
}
function time(ctx,inc,i){ console.log(i) setTimeout(function () { drawclock(ctx,i,inc) i++; if (i <= inc+1) { time(ctx,inc,i); } else{ timerDone(ctx); } }, 1000)
}
function timerDone(ctx){ ctx.beginPath(); $("input").prop('disabled', false); ctx.fillStyle = "black"; ctx.font = "30px Arial"; ctx.fillText("Done!",110,75);
}
function drawclock(ctx,offset1,increment){ offset1 ctx.moveTo(150,75) ctx.beginPath(); var x = 150 ; var y = 75 - 50 ; var x2 = 150; var y2 = 75 +50 ; ctx.arc(150,75,70,6*Math.PI/4,(6*Math.PI/4)+(2*Math.PI/increment)*offset1); ctx.strokeStyle = "black"; ctx.stroke(); }
Pomodoro - Script Codes
Pomodoro - Script Codes
Home Page Home
Developer Joseph1401
Username jmills4122
Uploaded September 16, 2022
Rating 3
Size 2,758 Kb
Views 38,456
Do you need developer help for Pomodoro?

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!

Joseph1401 (jmills4122) Script Codes
Name
Current Weather
Quote Generator
Portfolio
Collections browser thumbnails
Joe Test Pen
Bianary
WebGL
Menu test
Flex Stuff
TODO
Create amazing video scripts 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!