Web-based Time Management App JavaScript, HTML, CSS
👤 Sharing: AI
Okay, here's a basic, functional web-based time management app built with JavaScript, HTML, and CSS. I'll provide the code, broken down into the three file types, and then follow with explanations. This is a simplified version to get you started. We'll cover adding tasks, displaying them, and marking them as complete.
**HTML (index.html)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Time Management App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Time Management</h1>
<div class="input-area">
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addTaskBtn">Add</button>
</div>
<ul id="taskList">
<!-- Tasks will be dynamically added here -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
```
**CSS (style.css)**
```css
body {
font-family: sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 500px; /* or whatever width you prefer */
}
h1 {
text-align: center;
color: #333;
}
.input-area {
display: flex;
margin-bottom: 15px;
}
.input-area input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 10px;
}
.input-area button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.input-area button:hover {
background-color: #3e8e41;
}
#taskList {
list-style: none;
padding: 0;
}
#taskList li {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
#taskList li:last-child {
border-bottom: none;
}
#taskList li .completed {
text-decoration: line-through;
color: #888;
}
#taskList li button {
background-color: #f44336;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
#taskList li button:hover {
background-color: #da190b;
}
```
**JavaScript (script.js)**
```javascript
document.addEventListener('DOMContentLoaded', function() { // Ensures the DOM is fully loaded before running the script
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
addTaskBtn.addEventListener('click', addTask);
function addTask() {
const taskText = taskInput.value.trim(); // Get the value, remove leading/trailing spaces
if (taskText !== '') {
const listItem = document.createElement('li'); // Create a list item
listItem.textContent = taskText; // Set the text content of the list item
// Create a "Complete" button
const completeButton = document.createElement('button');
completeButton.textContent = 'Complete';
completeButton.addEventListener('click', completeTask);
// Create a "Delete" button
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', deleteTask);
listItem.appendChild(completeButton); // Append buttons to list item
listItem.appendChild(deleteButton);
taskList.appendChild(listItem); // Add the list item to the task list
taskInput.value = ''; // Clear the input field
taskInput.focus(); // Put the focus back in the input field
}
}
function completeTask(event) {
const listItem = event.target.parentNode; // Get the parent element (the <li>)
listItem.classList.toggle('completed'); // Toggles the 'completed' class (for styling)
}
function deleteTask(event) {
const listItem = event.target.parentNode;
taskList.removeChild(listItem); //Remove list item from DOM
}
});
```
**Explanation:**
1. **HTML (index.html):**
* Sets up the basic structure of the webpage.
* Includes a title, a link to the CSS file (`style.css`), and the main content area.
* The content area (`<div class="container">`) contains:
* A heading (`<h1>`).
* An input field (`<input type="text">`) for entering tasks. It has an `id="taskInput"` so JavaScript can access it.
* An "Add" button (`<button>`). It has an `id="addTaskBtn"` so JavaScript can attach a click handler to it.
* An unordered list (`<ul>`) with the `id="taskList"`. This is where the tasks will be displayed.
* Includes the JavaScript file (`script.js`) at the end of the `<body>`. This is important to ensure the HTML elements are loaded before the JavaScript tries to interact with them.
2. **CSS (style.css):**
* Provides basic styling for the elements on the page.
* Sets the font, background color, and centering for the body.
* Styles the container, heading, input area, buttons, and the task list.
* The `.completed` class is used to style completed tasks (e.g., with a strikethrough).
3. **JavaScript (script.js):**
* **`document.addEventListener('DOMContentLoaded', function() { ... });`**: This ensures that the JavaScript code runs only after the entire HTML document has been fully loaded and parsed by the browser. This prevents errors that can occur if the script tries to access elements that haven't been created yet.
* **Get References to Elements:**
* `const taskInput = document.getElementById('taskInput');` gets a reference to the input field using its ID.
* `const addTaskBtn = document.getElementById('addTaskBtn');` gets a reference to the "Add" button.
* `const taskList = document.getElementById('taskList');` gets a reference to the unordered list.
* **`addTaskBtn.addEventListener('click', addTask);`**: This sets up an event listener on the "Add" button. When the button is clicked, the `addTask` function will be executed.
* **`addTask()` Function:**
* `const taskText = taskInput.value.trim();` retrieves the text entered in the input field and removes any leading or trailing whitespace using the `trim()` method.
* `if (taskText !== '') { ... }`: Checks if the task text is not empty. If it's empty, nothing happens.
* `const listItem = document.createElement('li');` creates a new list item (`<li>`) element.
* `listItem.textContent = taskText;` sets the text content of the list item to the task text.
* The functions `completeTask()` and `deleteTask()` do the job when respective buttons are clicked.
* `listItem.appendChild(completeButton);`
* `listItem.appendChild(deleteButton);` appends the buttons to the list item.
* `taskList.appendChild(listItem);` adds the new list item to the `taskList` (the `<ul>`).
* `taskInput.value = '';` clears the input field after the task has been added.
* `taskInput.focus();` puts the cursor back in the input field so the user can easily type the next task.
* **`completeTask()` Function:**
* `const listItem = event.target.parentNode;` gets the parent element of the button that was clicked (which is the `<li>` element).
* `listItem.classList.toggle('completed');` toggles the `completed` class on the list item. This adds the class if it's not already there, and removes it if it is. This allows you to mark a task as complete and then unmark it.
* **`deleteTask()` Function:**
* `const listItem = event.target.parentNode;` gets the parent element of the button that was clicked.
* `taskList.removeChild(listItem);` removes the list item from the task list.
**How to Run This:**
1. **Save the files:** Save the HTML as `index.html`, the CSS as `style.css`, and the JavaScript as `script.js` in the *same* directory (folder).
2. **Open in a browser:** Open `index.html` in your web browser (e.g., Chrome, Firefox, Safari). You should see the basic time management app interface.
3. **Test:** Type a task in the input field and click "Add". The task should appear in the list. Click the "Complete" button to mark it as completed (it will get a strikethrough). Click the "Delete" button to remove the task.
**Key Improvements and Next Steps (Beyond Basic):**
* **Local Storage:** Currently, the tasks are lost when you refresh the page. Use `localStorage` to save the tasks in the browser's local storage so they persist across sessions. You'd need to add code to load the tasks from `localStorage` when the page loads and save them whenever a task is added, completed, or deleted.
* **Edit Tasks:** Add the ability to edit existing tasks.
* **Due Dates:** Add input fields for setting due dates for tasks. Display the due dates with the tasks and sort the tasks by due date.
* **Priorities:** Add a way to set the priority of tasks (e.g., high, medium, low). Display the priority and allow sorting by priority.
* **Drag and Drop:** Implement drag and drop functionality to allow users to reorder tasks easily.
* **More Sophisticated Styling:** Improve the styling to make the app more visually appealing. Consider using a CSS framework like Bootstrap or Tailwind CSS.
* **Backend Integration (Advanced):** If you want to store the data permanently and allow users to access their tasks from different devices, you'll need to integrate a backend (e.g., using Node.js, Python/Django, Ruby on Rails, etc.) and a database.
This example provides a solid foundation. Start by implementing the local storage feature, and then progressively add more features based on your needs. Remember to test your code thoroughly as you go. Good luck!
👁️ Viewed: 8
Comments