Skip to content

Commit

Permalink
add the timer functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sachin-Mahato
Sachin-Mahato committed Aug 8, 2024
1 parent db561a3 commit 03128ad
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 51 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,18 @@ <h2>long break</h2>
<section class="circle">
<div class="circle__inner" data-id="inner">
<div class="circle__time" data-id="timer">25:00</div>
<button class="circle__title">start</button>
<button class="circle__title" type="button" data-id="start__btn">start</button>
</div>
</section>
<!-- settings icon -->
<div class="settings">
<div class="settings" data-id="settings__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path fill="#D7E0FF" d="M26.965 17.682l-2.927-2.317c.055-.448.097-.903.097-1.365 0-.462-.042-.917-.097-1.365l2.934-2.317a.702.702 0 00.167-.896l-2.775-4.851a.683.683 0 00-.847-.301l-3.454 1.407a10.506 10.506 0 00-2.345-1.379l-.52-3.71A.716.716 0 0016.503 0h-5.55a.703.703 0 00-.687.588l-.52 3.71c-.847.357-1.63.819-2.345 1.379L3.947 4.27a.691.691 0 00-.847.301L.325 9.422a.705.705 0 00.167.896l2.927 2.317c-.055.448-.097.903-.097 1.365 0 .462.042.917.097 1.365L.492 17.682a.702.702 0 00-.167.896L3.1 23.429a.683.683 0 00.847.301L7.4 22.323a10.506 10.506 0 002.345 1.379l.52 3.71c.056.329.34.588.687.588h5.55a.703.703 0 00.687-.588l.52-3.71c.847-.357 1.631-.819 2.346-1.379l3.454 1.407c.313.119.673 0 .847-.301l2.775-4.851a.705.705 0 00-.167-.896zM13.73 18.9c-2.685 0-4.857-2.191-4.857-4.9 0-2.709 2.172-4.9 4.857-4.9 2.684 0 4.856 2.191 4.856 4.9 0 2.71-2.172 4.9-4.856 4.9z" opacity="0.5"></path></svg>
</div>
<!-- hidden pomodoro settings -->
<section class="pomodoro__settings" data-id="settings">
<div class="pomodoro__settings-con">
<h2 class="pomodoro__settings-title">settings</h2>
<i class="pomodoro__settings_icon">X</i>
<i class="pomodoro__settings_cross" data-id="cross">X</i>
</div>
<div class="settings__details">
<!-- pomodoro modification -->
Expand Down
2 changes: 1 addition & 1 deletion src/css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@import url(./reset.css);
@import url(./variables.css);
@import url(./main.css);
@import url(./styles.css);
30 changes: 18 additions & 12 deletions src/css/main.css → src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -37,7 +37,6 @@ body {
color: hsl(234, 39%, 14%);
border-radius: 25px;
padding-inline: 0.8em;
padding-block: 1em;
}
/* Pomodoro timer circle */
.circle {
Expand All @@ -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%;
Expand Down Expand Up @@ -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;
Expand All @@ -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 */
Expand Down Expand Up @@ -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%);
}


Expand All @@ -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;
Expand Down
56 changes: 22 additions & 34 deletions src/ts/main.ts
View file
Original file line number Diff line number Diff line change
@@ -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<Element> = 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) => {
Expand All @@ -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);
});
34 changes: 33 additions & 1 deletion src/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,36 @@ function longBreakClickHandler(value: string) {
})
}

export {pink, cyan, orange, defaultFont, monoFont, slabFont, sessionClickHandler, longBreakClickHandler, shortBreakClickHandler}

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}

0 comments on commit 03128ad

Please sign in to comment.