Priya Kumari
4 years ago
committed by
GitHub
parent
7639d2e196
commit
76c7b544f0
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,10 @@
|
|||||||
|
# Pomodoro-Timer
|
||||||
|
|
||||||
|
# Description
|
||||||
|
|
||||||
|
* Pomodoro is an excellent technique for increasing your productivity and helps you overcome procrastination.
|
||||||
|
* Set your timer and focus on a single task until the timer rings. When your session ends, mark off one pomodoro and record what you completed. Then enjoy a five-minute break.
|
||||||
|
* Created using Vanilla Javascript.
|
||||||
|
|
||||||
|
# Snapshot
|
||||||
|
![Preview]()
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
const sessionLength= document.querySelector('#sessionLength');
|
||||||
|
const breakLength= document.querySelector('#breakLength');
|
||||||
|
const addSession= document.querySelector('#add-session');
|
||||||
|
const subSession= document.querySelector('#sub-session');
|
||||||
|
const addBreak= document.querySelector('#add-break');
|
||||||
|
const subBreak= document.querySelector('#sub-break');
|
||||||
|
|
||||||
|
const startButton= document.querySelector('.start');
|
||||||
|
const stopButton= document.querySelector('.stop');
|
||||||
|
const resetButton= document.querySelector('.reset');
|
||||||
|
|
||||||
|
const clock= document.querySelector('.clock');
|
||||||
|
const session= document.querySelector('.session');
|
||||||
|
|
||||||
|
startButton.addEventListener('click',startPomodoro);
|
||||||
|
resetButton.addEventListener('click',resetPomodoro);
|
||||||
|
stopButton.addEventListener('click',stopPomodoro);
|
||||||
|
|
||||||
|
let workTime= sessionLength.innerHTML;
|
||||||
|
let breakTime= breakLength.innerHTML;
|
||||||
|
let timerID;
|
||||||
|
let timeStart;
|
||||||
|
addSession.addEventListener('click',()=>{
|
||||||
|
if(workTime<60){workTime++;}
|
||||||
|
sessionLength.innerHTML= workTime;
|
||||||
|
clock.innerHTML= workTime+':00';
|
||||||
|
console.log(workTime);
|
||||||
|
})
|
||||||
|
subSession.addEventListener('click',()=>{
|
||||||
|
if(workTime>1){workTime--;}
|
||||||
|
sessionLength.innerHTML= workTime;
|
||||||
|
clock.innerHTML= workTime+':00';
|
||||||
|
})
|
||||||
|
addBreak.addEventListener('click',()=>{
|
||||||
|
if(breakTime<60){breakTime++;}
|
||||||
|
breakLength.innerHTML=breakTime;
|
||||||
|
})
|
||||||
|
subBreak.addEventListener('click',()=>{
|
||||||
|
if(breakTime>1){breakTime--;}
|
||||||
|
breakLength.innerHTML=breakTime;
|
||||||
|
})
|
||||||
|
function stopPomodoro(){
|
||||||
|
addSession.disabled=false;
|
||||||
|
subSession.disabled=false;
|
||||||
|
addBreak.disabled=false;
|
||||||
|
subBreak.disabled=false;
|
||||||
|
startButton.disabled= false;
|
||||||
|
clearInterval(timerID);
|
||||||
|
session.innerHTML="Work Session";
|
||||||
|
clock.innerHTML=sessionLength.innerHTML+":00";
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetPomodoro(){
|
||||||
|
addSession.disabled=true;
|
||||||
|
subSession.disabled=true;
|
||||||
|
addBreak.disabled=true;
|
||||||
|
subBreak.disabled=true;
|
||||||
|
startButton.disabled= true;
|
||||||
|
clearInterval(timerID);
|
||||||
|
document.querySelector('.timer').style.borderColor="#BD3737";
|
||||||
|
document.querySelector('.timer').style.backgroundColor="#942222";
|
||||||
|
timeStart= new Date().getTime();
|
||||||
|
session.innerHTML="Work Session";
|
||||||
|
totalSeconds= sessionLength.innerHTML * 60;
|
||||||
|
timerID= setInterval(changeTime,990);
|
||||||
|
}
|
||||||
|
function startPomodoro(){
|
||||||
|
addSession.disabled=true;
|
||||||
|
subSession.disabled=true;
|
||||||
|
addBreak.disabled=true;
|
||||||
|
subBreak.disabled=true;
|
||||||
|
startButton.disabled= true;
|
||||||
|
document.querySelector('.timer').style.borderColor="#BD3737";
|
||||||
|
document.querySelector('.timer').style.backgroundColor="#942222";
|
||||||
|
timeStart= new Date().getTime();
|
||||||
|
timerID= setInterval(changeTime,990);
|
||||||
|
totalSeconds= sessionLength.innerHTML * 60;
|
||||||
|
}
|
||||||
|
let minutes;
|
||||||
|
let seconds;
|
||||||
|
let totalSeconds;
|
||||||
|
function changeTime(){
|
||||||
|
let timeNow= new Date().getTime();
|
||||||
|
let diff= Math.floor((timeNow-timeStart)/1000);
|
||||||
|
console.log(totalSeconds+" "+diff);
|
||||||
|
let temp= totalSeconds-diff;
|
||||||
|
if(temp==2){
|
||||||
|
playSound();
|
||||||
|
}
|
||||||
|
if(diff>=totalSeconds){
|
||||||
|
changeSessions();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
minutes= Math.floor(temp/60);
|
||||||
|
seconds= Math.floor(temp-minutes*60);
|
||||||
|
if(seconds<10){seconds='0'+seconds;}
|
||||||
|
clock.innerHTML= minutes+':'+seconds;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeSessions(){
|
||||||
|
clearInterval(timerID);
|
||||||
|
timeStart= new Date().getTime();
|
||||||
|
if(session.innerHTML=="Work Session"){
|
||||||
|
session.innerHTML="Break Session";
|
||||||
|
clock.innerHTML=breakLength.innerHTML+':00';
|
||||||
|
totalSeconds= breakLength.innerHTML * 60;
|
||||||
|
document.querySelector('.timer').style.borderColor="#a31cd4";
|
||||||
|
document.querySelector('.timer').style.backgroundColor="#7b1cd4";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
session.innerHTML="Work Session";
|
||||||
|
clock.innerHTML=sessionLength.innerHTML+':00';
|
||||||
|
totalSeconds= sessionLength.innerHTML * 60;
|
||||||
|
document.querySelector('.timer').style.borderColor="#BD3737";
|
||||||
|
document.querySelector('.timer').style.backgroundColor="#942222";
|
||||||
|
}
|
||||||
|
timerID=setInterval(changeTime,990);
|
||||||
|
}
|
||||||
|
|
||||||
|
function playSound() {
|
||||||
|
|
||||||
|
var mp3 = "http://soundbible.com/grab.php?id=1746&type=mp3";
|
||||||
|
var audio = new Audio(mp3);
|
||||||
|
audio.play();
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
|
||||||
|
<title>Pomodoro Timer</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="heading">
|
||||||
|
<h1>POMODORO TIMER</h1>
|
||||||
|
</div>
|
||||||
|
<div class="bdy">
|
||||||
|
<div class="main-ui">
|
||||||
|
<div class="session-break-length">
|
||||||
|
<div class="session-length">
|
||||||
|
<div class="session-break-h">Session Length</div>
|
||||||
|
<div class="session-break-b">
|
||||||
|
<button type="button" id="sessionLength">25</button>
|
||||||
|
</div>
|
||||||
|
<div class="change-buttons">
|
||||||
|
<button type="button" class="ssr" id="add-session">+</button>
|
||||||
|
<button type="button" class="ssr" id="sub-session" >-</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="break-length">
|
||||||
|
<div class="session-break-h">Break Length</div>
|
||||||
|
<div class="session-break-b">
|
||||||
|
<button type="button" id="breakLength">5</button>
|
||||||
|
</div>
|
||||||
|
<div class="change-buttons">
|
||||||
|
<button type="button" class="ssr" id="add-break">+</button>
|
||||||
|
<button type="button" class="ssr" id="sub-break">-</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pomodoro">
|
||||||
|
<div class="timer">
|
||||||
|
<div class="session">Work Session</div>
|
||||||
|
<div class="clock">25:00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="important-btns">
|
||||||
|
<button type="button" class="ssr start">START</button>
|
||||||
|
<button type="button" class="ssr stop">STOP</button>
|
||||||
|
<button type="button" class="ssr reset">RESET</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color: rgb(242, 245, 237);
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.heading{
|
||||||
|
height: 15vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items:flex-end;
|
||||||
|
font-family: 'Bree Serif', serif;
|
||||||
|
}
|
||||||
|
.bdy{
|
||||||
|
background-color: rgb(242, 245, 237);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 80vh;
|
||||||
|
transition: 0.1s all ease-out;
|
||||||
|
}
|
||||||
|
.main-ui{
|
||||||
|
height: 400px;
|
||||||
|
width: 400px;
|
||||||
|
background-color:#E1578A;
|
||||||
|
box-shadow: 2px 2px 10px #252525, -2px -2px 10px #252424
|
||||||
|
}
|
||||||
|
.session-break-length{
|
||||||
|
height: 30%;
|
||||||
|
font-family: 'Bree Serif', serif;
|
||||||
|
}
|
||||||
|
.pomodoro{
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
/* Buttons top */
|
||||||
|
.session-break-length{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.session-length,.break-length{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.session-break-h{
|
||||||
|
color: rgb(242, 245, 237);
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.session-break-b button{
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
color:#A9333A;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.session-break-b{
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 3%;
|
||||||
|
padding-bottom: 3%;
|
||||||
|
}
|
||||||
|
.session-break-length .change-buttons{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/* The pomodora clock */
|
||||||
|
.pomodoro{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.timer{
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid #A9333A;
|
||||||
|
/* border-color:rgb(5, 60, 243); */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: rgb(242, 245, 237);
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.session{
|
||||||
|
font-size: 17px;
|
||||||
|
padding-bottom: 2%;
|
||||||
|
}
|
||||||
|
.clock{
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 500
|
||||||
|
}
|
||||||
|
/* Bottom controls */
|
||||||
|
.important-btns{
|
||||||
|
padding-top:5%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding-right: 10%;
|
||||||
|
padding-left: 10%;
|
||||||
|
}
|
||||||
|
.ssr{
|
||||||
|
padding: 8px 15px;
|
||||||
|
background-color: #A9333A;
|
||||||
|
border-radius: 10%;
|
||||||
|
border: 2px solid #BD3737;
|
||||||
|
color: rgb(242, 245, 237);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.change-buttons .ssr{
|
||||||
|
padding: 4px 14px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.ssr:hover{
|
||||||
|
background-color: #BD3737;
|
||||||
|
font-weight:700;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 400px){
|
||||||
|
.main-ui{
|
||||||
|
height: 300px;
|
||||||
|
width:300px;
|
||||||
|
}
|
||||||
|
.session-break-h{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.session-break-b button{
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
.ssr{
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue