Merge pull request #67 from arjunsaxena122/main

Add - Pomodoro-Timer
Niraj-1729 · Oct 24, 2023 · b923cd4 · b923cd4
2 parents 623ae9b + 76d482d
commit b923cd4
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/Pomodoro-Timer/.vscode/settings.json b/Pomodoro-Timer/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Pomodoro-Timer/app.js b/Pomodoro-Timer/app.js
@@ -0,0 +1,95 @@
+const selectTypeElement = document.getElementById('select-type');
+const timerElement = document.querySelector('.timer');
+const btnWrapper = document.querySelector('.btn-wrapper');
+
+let interval, time;
+time = 25*60;
+
+function start(){ 
+        interval = setInterval(() => {
+            time--;
+            display(format(time));
+            if(time === 0){
+                clearInterval(interval);
+                timerElement.innerText = '00:00';
+                resetTime();
+            }
+        },1000);
+}
+
+function resetTime(selectType){
+    if(selectType === 'pomodoro')
+        time = 25*60;
+    if(selectType === 'break')
+        time = 5*60;
+    if(selectType === 'long-break')
+        time = 10*60;        
+}
+
+function selectSession(session){
+    if(session === 'pomodoro')
+        display('25:00');
+    if(session === 'break')
+        display('05:00');
+    if(session === 'long-break')
+        display('10:00');        
+}
+
+function reset(){
+    if(interval)
+        clearInterval(interval);
+    resetTime();
+    selectSession(selectTypeElement.value);
+}
+
+function format(time){
+    let min = Math.trunc(time / 60);
+    let sec = Math.round(((time / 60) - min)*60);
+
+    let minutes = min.toString().padStart(2,'0');
+    let seconds = sec.toString().padStart(2,'0');
+
+    return `${minutes}:${seconds}`;
+}
+
+function display(formattedTime){
+    timerElement.innerText = formattedTime;
+}
+
+let isClicked = true;
+
+btnWrapper.addEventListener('click', e => {
+
+    //start btn
+    if(e.target.id === 'start'){
+
+        //proceed only if the btn is clicked
+        if(isClicked){
+            //start the timer
+            start();
+        }
+
+        //to prevent it to start accidentally
+        isClicked = false;
+    }
+
+    //pause btn
+    if(e.target.id === 'pause'){
+
+        //so that after pausing, user can now again click on start to resume the timer
+        isClicked = true;
+        if(interval)
+            clearInterval(interval);
+    }
+
+    //reset btn
+    if(e.target.id === 'reset'){
+
+        isClicked = true;
+        reset();
+    }
+});
+selectTypeElement.addEventListener('change', ()=> {
+    selectSession(selectTypeElement.value);
+    resetTime(selectTypeElement.value);
+});
diff --git a/Pomodoro-Timer/index.html b/Pomodoro-Timer/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pomodoro Timer</title>
+    <link rel="stylesheet" href="./style.css" type="text/css">
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">Let's Do Work</h1>
+        <select id="select-type">
+            <option value="pomodoro" selected>Pomodoro</option>
+            <option value="break">Break</option>
+            <option value="long-break">Long Break</option>
+        </select>
+        <p class="timer">25:00</p>
+        <div class="btn-wrapper">
+            <button class="btn" id="start">START</button>
+            <button class="btn" id="pause">PAUSE</button>
+            <button class="btn" id="reset">RESET</button>
+        </div>
+    </div>
+    <script src="./app.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/Pomodoro-Timer/style.css b/Pomodoro-Timer/style.css
@@ -0,0 +1,81 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html,
+body {
+    font-size: 10px;
+    font-family: 'lato', Arial, Helvetica, sans-serif;
+}
+body {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #151b37;
+    flex-direction: column;
+}
+.container {
+    background:linear-gradient(90deg, #020c22, #4e253c);
+    width: 31rem;
+    height: 47rem;
+    border-radius: 1rem;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+.title {
+    font-size: 2.5rem;
+}
+.title,
+.timer,
+.footer {
+    background: #9867f0;
+    background: -webkit-linear-gradient(to right, #9867f0 0%, #d5557c 50%);
+    background: -moz-linear-gradient(to right, #9867f0 0%, #d5557c 50%);
+    background: linear-gradient(to right, #9867f0 0%, #d5557c 50%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+#select-type {
+    color: #d9749f;
+    background: black;
+    border: none;
+    width: 15rem;
+    height: 3rem;
+    cursor: pointer;
+    text-align: center;
+}
+.timer {
+    font-size: 10rem;
+}
+.btn-wrapper {
+    display: flex;
+    justify-content: center;
+}
+.btn {
+    border: none;
+    cursor: pointer;
+    padding: 1rem;
+    margin: 1rem;
+    border-radius: 0.2rem;
+    background: black;
+    color: #d5557c;
+    font-weight: bold;
+    letter-spacing: 2px;
+}
+.btn:hover {
+    opacity: 0.8;
+}
+.footer {
+    font-size: 1.2rem;
+    position: relative;
+    bottom: -2rem;
+    letter-spacing: 1px;
+}
+.footer > a {
+    text-decoration: none;
+}