diff --git a/Task Timer/README.md b/Task Timer/README.md new file mode 100644 index 0000000..0303f97 --- /dev/null +++ b/Task Timer/README.md @@ -0,0 +1,36 @@ +Certainly, here's a sample README file for your Task Timer web app, inspired by the reference README you provided: + +# Task Timer 🕒 + +[Live Demo](https://task-timer-efe4.onrender.com) + +## Overview 📝 + +Task Timer is a simple web application that allows users to track work or study sessions with customizable intervals and a visual timer display. Whether you need to manage your work hours, study sessions, or any other time-based tasks, Task Timer provides an easy-to-use solution. + +## Features 🚀 + +- **Customizable Timer**: Set your desired time for work or study sessions. +- **Visual Timer Display**: See the countdown timer in a user-friendly format. +- **Pause and Resume**: Pause and resume your sessions as needed. +- **Task Name**: Assign a name to your task to keep your focus. +- **Reset Functionality**: Start a new session or change your settings easily. + +## How to Use Task Timer 📖 + +1. **Set the Task Name**: Enter the name of the task you want to work on. +2. **Specify Time**: Input the number of minutes you plan to dedicate to the task. +3. **Start Timer**: Click the "Start" button to begin the timer countdown. +4. **Pause and Resume**: Use the "Pause" button to temporarily stop the timer, and the "Resume" button to continue. +5. **Reset**: To start a new session or adjust settings, click the "Reset" button. + +## Technologies Used 💻 + +- **HTML**: Used for structuring the web page and content. +- **CSS**: Applied for styling and layout. +- **JavaScript**: Implemented to create an interactive and dynamically updating timer. + +## User Interface 🖼️ + +![Task Timer](image.png) +![Task Timer Running](image-1.png) diff --git a/Task Timer/image-1.png b/Task Timer/image-1.png new file mode 100644 index 0000000..926a4a8 Binary files /dev/null and b/Task Timer/image-1.png differ diff --git a/Task Timer/image.png b/Task Timer/image.png new file mode 100644 index 0000000..720abec Binary files /dev/null and b/Task Timer/image.png differ diff --git a/Task Timer/index.html b/Task Timer/index.html new file mode 100644 index 0000000..e24a22b --- /dev/null +++ b/Task Timer/index.html @@ -0,0 +1,24 @@ + + + + Task Timer + + + +
+

Task Timer

+
+ 00:00 +
+
+ +
+
+ + + +
+
+ + + diff --git a/Task Timer/script.js b/Task Timer/script.js new file mode 100644 index 0000000..1955f2e --- /dev/null +++ b/Task Timer/script.js @@ -0,0 +1,99 @@ +const display = document.getElementById('display'); +const taskInput = document.getElementById('task'); +const minutesInput = document.getElementById('minutes'); +const startButton = document.getElementById('start'); +const resetButton = document.getElementById('reset'); + +let timer; +let isRunning = false; + +// Function to check if the task name and time inputs are empty +function areInputsEmpty() { + return taskInput.value.trim() === '' || minutesInput.value.trim() === ''; +} + +// Function to update the "Start" button state +function updateStartButtonState() { + startButton.disabled = areInputsEmpty(); +} + +// Initial button state +updateStartButtonState(); + +// Add event listeners for input changes +taskInput.addEventListener('input', function() { + updateStartButtonState(); + const taskName = taskInput.value || 'Task Timer'; + document.title = taskName; + document.querySelector('h1').textContent = taskName; +}); + +minutesInput.addEventListener('input', updateStartButtonState); + +startButton.addEventListener('click', function() { + if (!isRunning) { + if (areInputsEmpty()) { + alert('Task name and time must not be empty.'); + return; + } + + const minutes = parseInt(minutesInput.value); + if (!isNaN(minutes)) { + startTimer(minutes * 60); + } + } else { + stopTimer(); + } +}); + +resetButton.addEventListener('click', function() { + resetTimer(); +}); + +function startTimer(duration) { + isRunning = true; + startButton.textContent = 'Pause'; + taskInput.style.display = 'none'; // Hide the task input + minutesInput.style.display = 'none'; // Hide the time input + + let startTime = Date.now(); + let endTime = startTime + duration * 1000; + + timer = setInterval(function() { + let currentTime = Date.now(); + let remainingTime = (endTime - currentTime) / 1000; + if (remainingTime <= 0) { + stopTimer(); + display.textContent = '00:00'; + } else { + display.textContent = formatTime(remainingTime); + } + }, 1000); +} + +function stopTimer() { + isRunning = false; + startButton.textContent = 'Resume'; + taskInput.style.display = 'block'; // Show the task input + minutesInput.style.display = 'block'; // Show the time input + minutesInput.disabled = false; + clearInterval(timer); +} + +function resetTimer() { + isRunning = false; + startButton.textContent = 'Start'; + taskInput.style.display = 'block'; // Show the task input + minutesInput.style.display = 'block'; // Show the time input + minutesInput.disabled = false; + clearInterval(timer); + taskInput.value = ''; + minutesInput.value = ''; + display.textContent = '00:00'; +} + +function formatTime(seconds) { + const mins = Math.floor(seconds / 60); + const secs = Math.floor(seconds % 60); + return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; +} diff --git a/Task Timer/styles.css b/Task Timer/styles.css new file mode 100644 index 0000000..809f9cd --- /dev/null +++ b/Task Timer/styles.css @@ -0,0 +1,61 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +.container { + text-align: center; +} + +.timer { + font-size: 3rem; + margin: 20px 0; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; +} + +#minutes { + width: 100px; + margin-right: 10px; + padding: 10px 20px; + border-radius: 5px; +} + +#start, #reset { + background-color: #0074cc; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; +} + +#reset { + background-color: #cc0000; + margin-left: 10px; +} +.task-name { + margin-bottom: 20px; +} +.task-name input { + width: 100%; + padding: 10px; + border-radius: 5px; +} +@media screen and (max-width: 600px) { + .controls { + flex-direction: column; + } + .controls input, .controls button { + margin: 5px 0; + } +} \ No newline at end of file