Project: To-Do List
Step 1: HTML Structure
Create an HTML file named index.html and set up the basic structure.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>To-Do List</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h1>To-Do List</h1>
<input type=”text” id=”taskInput” placeholder=”Enter a task”>
<button id=”addButton”>Add Task</button>
<ul id=”taskList”></ul>
</div>
<script src=”script.js”></script>
</body>
</html>
Step 2: CSS Styling
Create a CSS file named styles.css for basic styling.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
display: block;
margin: 10px auto;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #ccc;
}
Step 3: JavaScript Logic
Create a JavaScript file named script.js for the application logic.
const taskInput = document.getElementById(“taskInput”);
const addButton = document.getElementById(“addButton”);
const taskList = document.getElementById(“taskList”);
addButton.addEventListener(“click”, addTask);
function addTask() {
const taskText = taskInput.value.trim();
if (taskText !== “”) {
const taskItem = document.createElement(“li”);
taskItem.textContent = taskText;
taskList.appendChild(taskItem);
taskInput.value = “”;
}
}
Step 4: Testing
Open the index.html file in a web browser. You should see a To-Do List with an input field, a “Add Task” button, and a list of tasks.
Congratulations! You’ve successfully created a simple To-Do List using HTML, CSS, and JavaScript. This project demonstrates how you can interact with user input, create and manipulate DOM elements, and create a dynamic list of tasks.
Here’s the detailed breakdown of the JavaScript code:
- We start by getting references to the HTML elements we’ll be interacting with: taskInput, addButton, and taskList.
- We attach an event listener to the “Add Task” button (addButton). This listener is set to call the addTask function when the button is clicked.
- The addTask function is defined. This function:
- Retrieves the value entered in the taskInput field and trims any leading or trailing whitespace.
- We check if the trimmed taskText is not an empty string.
- If the text is not empty, we create a new <li> element using document.createElement(“li”).
- We set the text content of the created <li> element to the taskText.
- We append the created <li> element to the taskList.
- We reset the value of the taskInput to an empty string to clear the input field.
By following these steps, the code creates a simple To-Do List that allows you to add tasks dynamically. This project demonstrates how JavaScript can be used to create and manipulate DOM elements based on user interaction.
