Pomodromo Timer

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]()

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();    
+
+  }

Pomodoro-Timer/index.html

@@ -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>

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;
+    }
+}