Prodigy-InfoTech · aslezar · Oct 27, 2023 · Oct 27, 2023
diff --git a/Task Timer/README.md 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
diff --git a/Task Timer/image.png b/Task Timer/image.png
diff --git a/Task Timer/index.html b/Task Timer/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Task Timer</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Task Timer</h1>
+        <div class="timer">
+            <span id="display">00:00</span>
+        </div>
+        <div class="task-name">
+            <input type="text" id="task" placeholder="Enter task name">
+        </div>
+        <div class="controls">
+            <input type="number" id="minutes" placeholder="Minutes">
+            <button id="start">Start</button>
+            <button id="reset">Reset</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Task Timer/script.js 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
@@ -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;
+    }
+}