Skip to content

Commit

Permalink
add sound effect when timer completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sachin-Mahato
Sachin-Mahato committed Aug 11, 2024
1 parent 03128ad commit aa7a878
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 45 deletions.
18 changes: 10 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,24 @@
</div>
<!-- pomodoro specification -->
<section class="hero__section" data-id="hero__section">
<div data-id="pomodoro" >
<div data-id="pomodoro" class="session bg__color" >
<h2>pomodoro</h2>
</div>
<div data-id="short__break" >

<h2 >short break</h2>
<div data-id="short__break" class="session">
<h2>short break</h2>
</div>
<div data-id="long__break" >
<div data-id="long__break" class="session">

<h2>long break</h2>
</div>
</section>
<section class="circle">
<div class="circle__inner" data-id="inner">
<div class="circle__time" data-id="timer">25:00</div>
<audio class="myAudio" src="./src/audio/alert.mp3">
</audio>
<button class="circle__title" type="button" data-id="start__btn">start</button>
<button type="button" class="circle__title block-btn" data-id="stop__btn">pause</button>
</div>
</section>
<!-- settings icon -->
Expand All @@ -62,15 +64,15 @@ <h2 class="pomodoro__settings-title">settings</h2>

<div class="settings__modify-pomodoro">
<p class="settings__modify-text">pomodoro</p>
<input type="number" min="25" value="25" class="pomodoro__session">
<input type="number" min="25" value="25" class="pomodoro__session" data-id="input">
</div>
<div class="settings__modify-short-break">
<p class="settings__modify-text">short break</p>
<input type="number" min="5" value="5" class="pomodoro__short-break" >
<input type="number" min="5" value="5" class="pomodoro__short-break" data-id="input">
</div>
<div class="settings__modify-long-break">
<p class="settings__modify-text" >long break</p>
<input type="number" min="15" value="15" class="pomodoro__long-break" >
<input type="number" min="15" value="15" class="pomodoro__long-break" data-id="input">
</div>
</div>
</div>
Expand Down
Binary file added src/audio/alert.mp3
View file
Binary file not shown.
7 changes: 6 additions & 1 deletion src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ body {
border-radius: 50px;
}
/* Switch */
.switch {
.bg__color {
background-color: hsl(0, 91%, 71%);
color: hsl(234, 39%, 14%);
border-radius: 25px;
padding-inline: 0.8em;
padding-block: 0.8em;
}
/* Pomodoro timer circle */
.circle {
Expand Down Expand Up @@ -76,6 +77,9 @@ body {
outline: none;
color: rgb(214, 223, 255);
}
.block-btn {
display: none;
}
/* pomodoro settings */

.pomodoro__settings {
Expand Down Expand Up @@ -276,6 +280,7 @@ body {
margin-inline: auto;
cursor: pointer;
}

.checked {
background-image: url('../img/icon-check.svg');
background-repeat: no-repeat;
Expand Down
101 changes: 76 additions & 25 deletions src/ts/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,88 @@
import { settingsClickHandler } from "../utils/utils";

const buttons: NodeListOf<Element> = document.body.querySelectorAll('[data-id = "hero__section"]');
let currentToggleElement: HTMLElement | null = null;
import { selectSession, settingsClickHandler } from "../utils/utils";
const buttons: NodeListOf<Element> = document.body.querySelectorAll('.session');
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 container: HTMLElement | null = document.body.querySelector('.container');
const startBtn = document.body.querySelector('[data-id="start__btn"]');
const pauseBtn = document.body.querySelector('[data-id="stop__btn"]');
let countDown: number | undefined;
let isRunning = false;
let minutes: number;
let seconds: number;

buttons?.forEach((btn) => {
btn.addEventListener("click", (e) => {
const switchEle = (e.target as HTMLElement).parentNode as HTMLElement;

if (switchEle) {
function start() {
if(!isRunning) {
isRunning = true;

if (currentToggleElement && currentToggleElement !== switchEle) {
currentToggleElement.classList.remove("switch");
}
switchEle.classList.toggle("switch");
currentToggleElement = switchEle;
const timerElement = document.body.querySelector('[data-id="timer"]');
if (timerElement) {
const timeText = timerElement.innerText.trim(); // Get and trim the text content
const [initialMinutes, initialSeconds] = timeText.split(':').map(Number); // Split and convert to numbers
minutes = initialMinutes || 0; // Default to 0 if parsing fails
seconds = initialSeconds || 0; // Default to 0 if parsing fails
} else {
// Default values if the timer element is not found
minutes = 25;
seconds = 0;
}
countDown = setInterval(updateCountDown, 1000);
}
}
function stop (){
isRunning = false;
if (countDown !== undefined) {
clearInterval(countDown)
}
}

});
});

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--;
function updateCountDown () {
let timer = document.body.querySelector('[data-id="timer"]');
const soundEffect: HTMLAudioElement | null = document.body.querySelector('.myAudio');

if (minutes === 0 && seconds === 0) {
stop();
if (soundEffect) {
soundEffect.play()
}
return;
}

if (seconds === 0) {
minutes--;
seconds = 59
} else {
seconds--;
}

if (timer) {
timer.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

}
startBtn?.addEventListener("click", (e) => {
setInterval(showTime, 1000)
startBtn.innerText = "Pause"


startBtn?.addEventListener("click", () => {
start()
startBtn.classList.add("block-btn");
pauseBtn?.classList.remove("block-btn");
})
pauseBtn?.addEventListener("click", () => {
stop()
pauseBtn.classList.add("block-btn");
startBtn?.classList.remove("block-btn");
})


buttons?.forEach((btn) => {
btn.addEventListener("click", (e) => {
const target = e.currentTarget as HTMLElement;
selectSession(target)
});
});

settingsIcon?.addEventListener("click", () => {
settings?.classList.add("flex")
})
Expand All @@ -44,3 +91,7 @@ crossIcon?.addEventListener("click", () => {
settings?.classList.remove("flex")
})

settings?.addEventListener("click", (e: MouseEvent) => {
settingsClickHandler(e)
})

55 changes: 44 additions & 11 deletions src/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const orange = (): void => {
pinkCheckbox?.classList.remove("checked");
};

const defaultFont = ():void => {
const defaultFont = (): void => {
const body = document.body;
const defaultFont = body.querySelector(".settings__fonts-default");
const slabFont = body.querySelector(".settings__fonts-slab");
Expand Down Expand Up @@ -77,8 +77,8 @@ const monoFont = (): void => {
defaultFont?.classList.remove("cover");
};

function sessionClickHandler(value: string) {
let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]');
function sessionClickHandler(value: string): void {
let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]');
const pomodoroSession: HTMLElement | null = document.body.querySelector('[data-id="pomodoro"]')
pomodoroSession?.addEventListener("click", () => {
if (timer) {
Expand All @@ -90,8 +90,8 @@ function sessionClickHandler(value: string) {

}

function shortBreakClickHandler(value: string) {
let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]');
function shortBreakClickHandler(value: string ): void {
let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]');
const shortBreak: HTMLElement | null = document.body.querySelector('[data-id="short__break"]')

shortBreak?.addEventListener("click", () => {
Expand All @@ -104,9 +104,9 @@ function shortBreakClickHandler(value: string) {

}

function longBreakClickHandler(value: string) {
function longBreakClickHandler(value: string ): void {

let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]');
let timer: HTMLElement | null = document.body.querySelector('[data-id="timer"]');
const longBreak: HTMLElement | null = document.body.querySelector('[data-id="long__break"]')

longBreak?.addEventListener("click", () => {
Expand All @@ -118,8 +118,40 @@ function longBreakClickHandler(value: string) {
})
}

function selectSession(target: HTMLElement) {
const pomodoro = document.body.querySelector('[data-id="pomodoro"]');
const shortBreak = document.body.querySelector('[data-id="short__break"]');
const longBreak = document.body.querySelector('[data-id="long__break"]')
const session = document.body.querySelector('[data-id="timer"]');

if (target.dataset.id?.includes("short__break")) {
if (session) {
session.textContent = "5:00"
}
shortBreak?.classList.add("bg__color")
pomodoro?.classList.remove("bg__color")
longBreak?.classList.remove("bg__color")
}

else if (target.dataset.id?.includes("long__break")) {
if (session) {
session.textContent = "15:00"
}
longBreak?.classList.add("bg__color")
shortBreak?.classList.remove("bg__color")
pomodoro?.classList.remove("bg__color")
} else {
if (session) {
session.textContent = "25:00"
}
pomodoro?.classList.add("bg__color")
longBreak?.classList.remove("bg__color")
shortBreak?.classList.remove("bg__color")
}
}


function settingsClickHandler(e: MouseEvent) {
function settingsClickHandler(e: MouseEvent): void {
const target = e.target as HTMLElement;
const applyButton = document.body.querySelector('[data-id="apply__btn"]');

Expand All @@ -140,14 +172,15 @@ function settingsClickHandler(e: MouseEvent) {
} else if (target.classList.contains("pomodoro__session")) {
const value = (target as HTMLInputElement).value;
sessionClickHandler(value)
} else if (target.classList.contains("pomodoro__short-break")) {
} 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}

export { settingsClickHandler, selectSession }

0 comments on commit aa7a878

Please sign in to comment.