diff --git a/Pomodoro-Timer/Preview.png b/Pomodoro-Timer/Preview.png new file mode 100644 index 00000000..ec587169 Binary files /dev/null and b/Pomodoro-Timer/Preview.png differ diff --git a/Pomodoro-Timer/README.md b/Pomodoro-Timer/README.md new file mode 100644 index 00000000..7d7090d7 --- /dev/null +++ b/Pomodoro-Timer/README.md @@ -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]() diff --git a/Pomodoro-Timer/app.js b/Pomodoro-Timer/app.js new file mode 100644 index 00000000..12a1a32f --- /dev/null +++ b/Pomodoro-Timer/app.js @@ -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(); + + } \ No newline at end of file diff --git a/Pomodoro-Timer/index.html b/Pomodoro-Timer/index.html new file mode 100644 index 00000000..4439bd2c --- /dev/null +++ b/Pomodoro-Timer/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + + Pomodoro Timer + + +
+

POMODORO TIMER

+
+
+
+
+
+
Session Length
+
+ +
+
+ + +
+
+
+
Break Length
+
+ +
+
+ + +
+
+
+
+
+
Work Session
+
25:00
+
+
+
+ + + +
+
+
+ + + \ No newline at end of file diff --git a/Pomodoro-Timer/style.css b/Pomodoro-Timer/style.css new file mode 100644 index 00000000..35429663 --- /dev/null +++ b/Pomodoro-Timer/style.css @@ -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; + } +} \ No newline at end of file