Merge pull request #6 from faizalmsdev/adding-projects

Implement Pomodoro Timer Project
alsiam · Sep 9, 2023 · 56a3d40 · 56a3d40 · vercel · Sep 9, 2023
2 parents 8ef0f49 + 119c101
commit 56a3d40
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 0 deletions.
diff --git a/Pomodoro Timer/index.html b/Pomodoro Timer/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Pomodoro Timer</title>
+</head>
+<body>
+
+    <div class="container">
+        <h1 class="title">
+            Pomodoro Timer
+        </h1>
+        <p class="timer" id="timer">
+            25:00
+        </p>
+        <div class="button-wrapper">
+            <button id="start">Start</button>
+            <button id="stop">Stop</button>
+            <button id="reset">Reset</button>
+        </div>
+    </div>
+
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Pomodoro Timer/script.js b/Pomodoro Timer/script.js
@@ -0,0 +1,42 @@
+const start = document.getElementById('start');
+const stop = document.getElementById('stop');
+const reset = document.getElementById('reset');
+const timer = document.getElementById('timer');
+
+
+let interval;
+
+let timeLeft = 1500;
+
+function update(){
+    let minutes = Math.floor(timeLeft / 60);
+    let seconds = timeLeft % 60 ;
+    let formattedTime =` ${minutes} :  ${seconds}`;
+
+    timer.innerHTML = formattedTime;
+}
+
+function startTimer(){
+    interval = setInterval(() => {
+        timeLeft--;
+        update();
+        if(timeLeft === 0){
+            alert('Times Up');
+            timeLeft = 1500;
+        }
+    }, 1000);
+}
+
+
+function stopTimer(){
+    clearInterval(interval);
+}
+function resetTimer(){
+    clearInterval(interval);
+    timeLeft = 1500;
+    update();
+}
+
+start.addEventListener('click', startTimer);
+stop.addEventListener('click', stopTimer);
+reset.addEventListener('click', resetTimer);
diff --git a/Pomodoro Timer/style.css b/Pomodoro Timer/style.css
@@ -0,0 +1,52 @@
+.container{
+    margin: 0 auto;
+    max-width: 400px;
+    text-align: center;
+    padding: 20px;
+    font-family: "Roboto",sans-serif;
+    background-color: #f5f5f5;
+    margin-top:120px;
+}
+
+.title{
+    font-size: 36px;
+    margin-bottom: 10px;
+    color: #2c3e50;
+}
+
+.timer{
+    font-size: 72px;
+    color: #2c3e50;
+}
+
+button{
+    font-size: 18px;
+    padding:10px 20px;
+    margin: 10px;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: opacity .3s ease-in-out;
+}
+
+button:hover{
+    opacity: 70%;
+}
+
+#start{
+    background-color: #37ae60;
+}
+
+#stop{
+    background-color: #c0392b;
+}
+
+#reset{
+    background-color: #7f8c8d;
+}
+
+
+
+
diff --git a/assets/images/pomodoro-timer.png b/assets/images/pomodoro-timer.png
diff --git a/projects.js b/projects.js
@@ -165,4 +165,11 @@ window.totalProjects = [
     preview: "https://alsiam.github.io/web-projects/todo-list",
     code: "https://github.com/alsiam/web-projects/tree/main/todo-list",
   },
+  {
+    id: 20,
+    name: "Pomodoro Timer",
+    thumbnail: "assets/images/pomodoro-timer.png",
+    preview: "https://alsiam.github.io/web-projects/pomodoro-timer",
+    code: "https://github.com/alsiam/web-projects/tree/main/pomodoro-timer",
+  },
 ];