Title: Building a Simple To-Do List Web App with HTML, CSS, and JavaScript
See the Pen Building a Simple To-Do List Web App with HTML, CSS, and JavaScript by AryCodes (@AryCodes) on CodePen.
Introduction:
In this blog post, we'll take you through the step-by-step process of creating a basic to-do list web application using HTML, CSS, and JavaScript. By the end of this tutorial, you'll have a fully functional to-do list that you can use to keep track of tasks and mark them as completed.
HTML Structure:
Let's start by setting up the HTML structure for our to-do list. We'll create a basic template that includes the necessary elements for our application.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta and title tags -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="todolist" id="todolist">
<!-- Tasks will be added here dynamically -->
</div>
<div class="addtaskcontainer">
<input type="text" id="inputtask" placeholder="Add a task">
<button id="addtask">Add</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS Styling:
We've used CSS to style our to-do list application. The styling includes background images, rounded corners, and customized scrollbars to make the app visually appealing.
```css
/* CSS styles go here */
```
JavaScript Functionality:
The JavaScript code is responsible for the core functionality of our to-do list. It listens for the "Add" button click, creates new tasks, and manages task completion using checkboxes.
```javascript
let submitbutton = document.getElementById("addtask");
submitbutton.addEventListener("click", () => {
var newtask = document.getElementById("inputtask").value;
task = newtask.trim()
if (newtask != "") {
var list = document.getElementById("todolist")
var taskElement = document.createElement("span");
taskElement.className = "tasks";
taskElement.id = "tasks";
taskElement.innerHTML = `<input type="checkbox" id="check"><p id="task">${newtask}</p>`;
list.appendChild(taskElement);
document.getElementById("inputtask").value = "";
toaddeventlistener()
}
})
function toaddeventlistener() {
document.querySelectorAll("#check").forEach(element => {
element.addEventListener("click", () => {
var tasks = document.querySelectorAll(".tasks");
tasks.forEach(task => {
var checkbox = task.querySelector("#check");
if (checkbox.checked) {
var p = task.querySelector("#task");
p.style.textDecoration = "line-through";
} else {
var p = task.querySelector("#task");
p.style.textDecoration = "none";
}
});
})
});
}
toaddeventlistener()
```
Conclusion:
In this tutorial, we've walked you through the process of creating a simple to-do list web application using HTML, CSS, and JavaScript. You can use this project as a starting point and build upon it to create more advanced to-do list applications with additional features. Have fun coding and enhancing your to-do list application!
Author: AryCodes
Comments
Post a Comment