From 76d482da6f151d1598a1622d40a058f9f66e92a4 Mon Sep 17 00:00:00 2001 From: arjunsaxena122 Date: Mon, 23 Oct 2023 22:08:56 +0530 Subject: [PATCH] Add Pomodoro-Timer --- Pomodoro-Timer/.vscode/settings.json | 3 + Pomodoro-Timer/app.js | 95 ++++++++++++++++++++++++++++ Pomodoro-Timer/index.html | 26 ++++++++ Pomodoro-Timer/style.css | 81 ++++++++++++++++++++++++ 4 files changed, 205 insertions(+) create mode 100644 Pomodoro-Timer/.vscode/settings.json create mode 100644 Pomodoro-Timer/app.js create mode 100644 Pomodoro-Timer/index.html create mode 100644 Pomodoro-Timer/style.css diff --git a/Pomodoro-Timer/.vscode/settings.json b/Pomodoro-Timer/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/Pomodoro-Timer/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Pomodoro-Timer/app.js b/Pomodoro-Timer/app.js new file mode 100644 index 0000000..59fe373 --- /dev/null +++ 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); +}); \ No newline at end of file diff --git a/Pomodoro-Timer/index.html b/Pomodoro-Timer/index.html new file mode 100644 index 0000000..0f45363 --- /dev/null +++ b/Pomodoro-Timer/index.html @@ -0,0 +1,26 @@ + + + + + + Pomodoro Timer + + + +
+

Let's Do Work

+ +

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 0000000..ca60bf6 --- /dev/null +++ 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; +} \ No newline at end of file