diff --git a/projects/timerapp/timer/index.html b/projects/timerapp/timer/index.html
new file mode 100644
index 000000000..18afd84da
--- /dev/null
+++ b/projects/timerapp/timer/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Timer Application
+
+
+
+
+
+
diff --git a/projects/timerapp/timer/script.js b/projects/timerapp/timer/script.js
new file mode 100644
index 000000000..af9d4c86c
--- /dev/null
+++ b/projects/timerapp/timer/script.js
@@ -0,0 +1,68 @@
+let timerInterval;
+let totalSeconds = 0;
+
+const timerDisplay = document.getElementById("timer");
+const startBtn = document.getElementById("startBtn");
+const stopBtn = document.getElementById("stopBtn");
+const resetBtn = document.getElementById("resetBtn");
+const setTimerBtn = document.getElementById("setTimerBtn");
+const setHours = document.getElementById("setHours");
+const setMinutes = document.getElementById("setMinutes");
+const setSeconds = document.getElementById("setSeconds");
+
+function updateTimerDisplay() {
+ const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, "0");
+ const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(
+ 2,
+ "0"
+ );
+ const secs = String(totalSeconds % 60).padStart(2, "0");
+ timerDisplay.textContent = `${hours}:${minutes}:${secs}`;
+}
+
+function checkTime() {
+ if (totalSeconds <= 0) {
+ clearInterval(timerInterval);
+ alert("Time's up!");
+ startBtn.disabled = false;
+ stopBtn.disabled = true;
+ }
+}
+
+setTimerBtn.addEventListener("click", () => {
+ const hours = parseInt(setHours.value) || 0;
+ const minutes = parseInt(setMinutes.value) || 0;
+ const seconds = parseInt(setSeconds.value) || 0;
+
+ totalSeconds = hours * 3600 + minutes * 60 + seconds;
+ updateTimerDisplay();
+ startBtn.disabled = false;
+ stopBtn.disabled = true;
+});
+
+startBtn.addEventListener("click", () => {
+ if (totalSeconds > 0) {
+ startBtn.disabled = true;
+ stopBtn.disabled = false;
+
+ timerInterval = setInterval(() => {
+ totalSeconds--;
+ updateTimerDisplay();
+ checkTime();
+ }, 1000);
+ }
+});
+
+stopBtn.addEventListener("click", () => {
+ clearInterval(timerInterval);
+ startBtn.disabled = false;
+ stopBtn.disabled = true;
+});
+
+resetBtn.addEventListener("click", () => {
+ clearInterval(timerInterval);
+ totalSeconds = 0;
+ updateTimerDisplay();
+ startBtn.disabled = false;
+ stopBtn.disabled = true;
+});
diff --git a/projects/timerapp/timer/style.css b/projects/timerapp/timer/style.css
new file mode 100644
index 000000000..36e3faf8d
--- /dev/null
+++ b/projects/timerapp/timer/style.css
@@ -0,0 +1,85 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #ffebee;
+ font-family: Arial, sans-serif;
+}
+
+.container {
+ text-align: center;
+ background: rgba(255, 255, 255, 0.8);
+ /* Glassy feel */
+ backdrop-filter: blur(10px);
+ /* Glassy effect */
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+ margin-bottom: 20px;
+ font-size: 24px;
+ color: #d81b60;
+ /* Dark pink color */
+}
+
+.timer {
+ font-size: 48px;
+ color: #2c3e50;
+ margin-bottom: 20px;
+}
+
+.set-time {
+ margin: 20px 0;
+}
+
+input {
+ width: 60px;
+ padding: 5px;
+ font-size: 16px;
+ margin: 0 5px;
+ border: 2px solid #d81b60;
+ /* Dark pink border */
+ border-radius: 5px;
+}
+
+input:focus {
+ outline: none;
+ border-color: #d81b60;
+ /* Dark pink border on focus */
+}
+
+.buttons {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+}
+
+button {
+ padding: 10px 20px;
+ font-size: 16px;
+ border: 2px solid #d81b60;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+ background-color: white;
+ color: #d81b60;
+
+}
+
+button:hover {
+ background-color: #d81b60;/* Dark pink on hover */
+ color: white; /* White text on hover */
+}
+
+button:disabled {
+ background-color: rgba(216, 27, 96, 0.2);
+ color: #d81b60; /* Light pink feel for disabled button */
+ cursor: not-allowed;
+}