Creating a simple Todo app using HTML, CSS, and JavaScript is a great way to practice these technologies. Here’s a basic implementation that allows you to add and remove tasks:
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 Todo App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>Todo List</h1>
<input type="text" id="taskInput" placeholder="Enter task...">
<button onclick="addTask()">Add Task</button>
<ul id="taskList">
<!-- Tasks will be added dynamically here -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
cssbody {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.todo-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
text-align: center;
}
h1 {
color: #333;
}
input[type="text"] {
width: 70%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f9f9f9;
padding: 8px;
margin-bottom: 5px;
border-radius: 4px;
}
li:hover {
background-color: #f0f0f0;
cursor: pointer;
}
JavaScript (script.js)
javascript// Selecting elements from the DOM
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// Function to add a new task
function addTask() {
const taskText = taskInput.value.trim(); // Get task text and trim whitespace
if (taskText !== '') { // Check if input is not empty
// Create new list item
const li = document.createElement('li');
li.textContent = taskText; // Set li text content to task text
// Add remove button to list item
const removeButton = document.createElement('button');
removeButton.textContent = '❌';
removeButton.classList.add('remove-button');
removeButton.onclick = function() {
li.remove(); // Remove task when remove button is clicked
};
li.appendChild(removeButton); // Append remove button to list item
taskList.appendChild(li); // Append list item to task list
taskInput.value = ''; // Clear input field after adding task
}
}
Explanation:
HTML:
- Provides the structure for the Todo app with an input field for new tasks, a button to add tasks, and an empty
<ul>element (taskList) where tasks will be dynamically added.
- Provides the structure for the Todo app with an input field for new tasks, a button to add tasks, and an empty
CSS:
- Styles the Todo app container (
todo-container), input field, buttons, and list items (li) for a clean and user-friendly interface.
- Styles the Todo app container (
JavaScript:
- Handles the functionality of adding tasks (
addTask()function) and removing tasks (via the dynamically created remove buttons). - The
addTask()function:- Retrieves the task text from the input field, trims any leading/trailing whitespace.
- Checks if the input is not empty.
- Creates a new
<li>element containing the task text. - Adds a remove button (
❌) to each task item. - Appends the task item to the
<ul>(taskList). - Clears the input field after adding the task.
- Handles the functionality of adding tasks (
Usage:
- Type a task into the input field and click "Add Task" to add it to the list.
- Each task item has a remove button (
❌) that allows you to delete the task when clicked.
This example provides a basic framework for a Todo app. You can extend its functionality further (like adding persistence with local storage, editing tasks, or marking tasks as completed) based on your learning goals and project requirements.
