diff --git a/Pomodoro Timer/index.html b/Pomodoro Timer/index.html new file mode 100644 index 0000000..12726ba --- /dev/null +++ b/Pomodoro Timer/index.html @@ -0,0 +1,30 @@ + + + + + + + + Pomodoro Timer + + + +
+

+ Pomodoro Timer +

+

+ 25:00 +

+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/Pomodoro Timer/script.js b/Pomodoro Timer/script.js new file mode 100644 index 0000000..78f0b6b --- /dev/null +++ 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); \ No newline at end of file diff --git a/Pomodoro Timer/style.css b/Pomodoro Timer/style.css new file mode 100644 index 0000000..5f4e609 --- /dev/null +++ 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 new file mode 100644 index 0000000..7e8ac5a Binary files /dev/null and b/assets/images/pomodoro-timer.png differ diff --git a/projects.js b/projects.js index bfc3324..96fd7bc 100644 --- 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", + }, ];