From 03128ad4fa86fd8bd0f83b094cf0d4debc5b0fbe Mon Sep 17 00:00:00 2001 From: sachin Date: Thu, 8 Aug 2024 20:00:55 +0530 Subject: [PATCH] add the timer functionality --- index.html | 6 ++-- src/css/index.css | 2 +- src/css/{main.css => styles.css} | 30 ++++++++++------- src/ts/main.ts | 56 +++++++++++++------------------- src/utils/utils.ts | 34 ++++++++++++++++++- 5 files changed, 77 insertions(+), 51 deletions(-) rename src/css/{main.css => styles.css} (92%) diff --git a/index.html b/index.html index 5b1ef10..2a328a8 100644 --- a/index.html +++ b/index.html @@ -41,18 +41,18 @@

long break

25:00
- +
-
+

settings

- X + X
diff --git a/src/css/index.css b/src/css/index.css index 2f0b7da..5de67da 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,3 +1,3 @@ @import url(./reset.css); @import url(./variables.css); -@import url(./main.css); \ No newline at end of file +@import url(./styles.css); \ No newline at end of file diff --git a/src/css/main.css b/src/css/styles.css similarity index 92% rename from src/css/main.css rename to src/css/styles.css index faec862..f596e4d 100644 --- a/src/css/main.css +++ b/src/css/styles.css @@ -28,7 +28,7 @@ body { color: rgba(214, 223, 255, 0.4); background-color: hsl(234, 39%, 14%); padding-block: 1em; - padding-inline: 2.5em; + padding-inline: 1.5em; border-radius: 50px; } /* Switch */ @@ -37,7 +37,6 @@ body { color: hsl(234, 39%, 14%); border-radius: 25px; padding-inline: 0.8em; - padding-block: 1em; } /* Pomodoro timer circle */ .circle { @@ -52,7 +51,7 @@ body { } .circle__inner { - border-color: hsl(0, 91%, 81%); + border-color: hsl(0, 91%, 71%); border-width: 10px; border-style: solid; width: 87%; @@ -84,11 +83,17 @@ body { border-radius: 20px; padding-inline: 2em; padding-block: 1.5em; - display: flex; + display: none; flex-direction: column; gap: 1em; margin-block-end: 1em; } +.flex { + display: flex; + position: absolute; + top: 100px; + +} .pomodoro__settings-con { display: flex; @@ -101,21 +106,22 @@ body { font-weight: 600; color: hsl(235, 35%, 18%); } -.pomodoro__settings-icon { +.pomodoro__settings_cross { color: hsl(235, 35%, 18%); font-weight: 700; + cursor: pointer; } .border-orange { - border-color: hsl(0, 91%, 81%); + border-color: hsl(0, 91%, 71%); } .border-cyan { - border-color: #70F3F8; + border-color: hsl(182, 91%, 71%); } .border-pink { - border-color: #D881F8; + border-color: hsl(284, 89%, 74%); } /* settings modify details */ @@ -240,15 +246,15 @@ body { appearance: none; } .orange { - background-color: hsl(0, 91%, 81%); + background-color: hsl(0, 91%, 71%); } .cyan { - background-color: #70F3F8; + background-color: hsl(182, 91%, 71%); } .pink { - background-color: #D881F8; + background-color: hsl(284, 89%, 74%); } @@ -261,7 +267,7 @@ body { height: 40px; border: none; outline: none; - background-color: hsl(0,91%,81%); + background-color: hsl(0,91%,71%); color: hsl(0, 0%, 100%); font-weight: 700; border-radius: 20px; diff --git a/src/ts/main.ts b/src/ts/main.ts index 3eeec99..41f0266 100644 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -1,8 +1,11 @@ -import { cyan,pink,orange,defaultFont, slabFont,monoFont, longBreakClickHandler, sessionClickHandler, shortBreakClickHandler } from "../utils/utils"; +import { settingsClickHandler } from "../utils/utils"; const buttons: NodeListOf = document.body.querySelectorAll('[data-id = "hero__section"]'); let currentToggleElement: HTMLElement | null = null; const settings: HTMLElement | null = document.body.querySelector('[data-id="settings"]'); +const settingsIcon: HTMLElement | null = document.body.querySelector('[data-id="settings__icon"]'); +const crossIcon: HTMLElement | null = document.body.querySelector('[data-id="cross"]'); +const startBtn = document.body.querySelector('[data-id="start__btn"]'); buttons?.forEach((btn) => { btn.addEventListener("click", (e) => { @@ -20,39 +23,24 @@ buttons?.forEach((btn) => { }); }); +let totalTime = 25 * 60; +function showTime() { + let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]'); + const minutes = Math.floor(totalTime / 60); + const seconds = totalTime % 60; + timer.innerText = `${minutes}: ${seconds}` + totalTime--; +} +startBtn?.addEventListener("click", (e) => { + setInterval(showTime, 1000) + startBtn.innerText = "Pause" +}) -function settingsClickHandler(e: MouseEvent) { - const target = e.target as HTMLElement; - const applyButton = document.body.querySelector('[data-id="apply__btn"]'); - - applyButton?.addEventListener("click", () => { - - if (target.classList.contains("cyan")) { - cyan(); - } else if (target.classList.contains("pink")) { - pink(); - } else if (target.classList.contains("orange")) { - orange(); - } else if (target.classList.contains("first")) { - defaultFont() - } else if (target.classList.contains("second")) { - slabFont() - } else if (target.classList.contains("third")) { - monoFont() - } else if (target.classList.contains("pomodoro__session")) { - const value = (target as HTMLInputElement).value; - sessionClickHandler(value) - } else if (target.classList.contains("pomodoro__short-break")) { - const value = (target as HTMLInputElement).value; - shortBreakClickHandler(value) - } else if (target.classList.contains("pomodoro__long-break")) { - const value = (target as HTMLInputElement).value; - longBreakClickHandler(value) - } +settingsIcon?.addEventListener("click", () => { + settings?.classList.add("flex") +}) - }); -} +crossIcon?.addEventListener("click", () => { + settings?.classList.remove("flex") +}) -settings?.addEventListener("click", (e) => { - settingsClickHandler(e as MouseEvent); -}); diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 9d498cf..90f8e35 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -118,4 +118,36 @@ function longBreakClickHandler(value: string) { }) } -export {pink, cyan, orange, defaultFont, monoFont, slabFont, sessionClickHandler, longBreakClickHandler, shortBreakClickHandler} \ No newline at end of file + +function settingsClickHandler(e: MouseEvent) { + const target = e.target as HTMLElement; + const applyButton = document.body.querySelector('[data-id="apply__btn"]'); + + applyButton?.addEventListener("click", () => { + + if (target.classList.contains("cyan")) { + cyan(); + } else if (target.classList.contains("pink")) { + pink(); + } else if (target.classList.contains("orange")) { + orange(); + } else if (target.classList.contains("first")) { + defaultFont() + } else if (target.classList.contains("second")) { + slabFont() + } else if (target.classList.contains("third")) { + monoFont() + } else if (target.classList.contains("pomodoro__session")) { + const value = (target as HTMLInputElement).value; + sessionClickHandler(value) + } else if (target.classList.contains("pomodoro__short-break")) { + const value = (target as HTMLInputElement).value; + shortBreakClickHandler(value) + } else if (target.classList.contains("pomodoro__long-break")) { + const value = (target as HTMLInputElement).value; + longBreakClickHandler(value) + } + + }); +} +export {pink, cyan, orange, defaultFont, monoFont, slabFont, sessionClickHandler, longBreakClickHandler, shortBreakClickHandler, settingsClickHandler}