Introduction:
Prerequisites:
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. It would be helpful to have a code editor installed on your computer, such as Visual Studio Code, Sublime Text, or Atom.
Step 1: Setting up the HTML Structure
First, let's create the basic structure of our to-do list application using HTML. Open your code editor and create a new HTML file called "index.html." Then, add the following code:
<!DOCTYPE html> <html> <head> <title>Simple To-Do List</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Simple To-Do List</h1> <div id="todo-container"> <input type="text" id="todo-input" placeholder="Enter a task..."> <button id="add-button">Add</button> <ul id="todo-list"></ul> </div> <script src="app.js"></script> </body> </html>
Step 2: Styling the To-Do List
Next, let's add some CSS styles to make our to-do list visually appealing. Create a new CSS file called "style.css" and add the following code:
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } h1 { text-align: center; } #todo-container { max-width: 400px; margin: 20px auto; } #todo-input { width: 100%; padding: 10px; margin-bottom: 10px; } #add-button { display: block; width: 100%; padding: 10px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; } #add-button:hover { background-color: #45a049; } .todo-item { margin-bottom: 5px; list-style-type: none; } .todo-item input[type="checkbox"] { margin-right: 5px; } .todo-item.completed label { text-decoration: line-through; color: #aaa; }
Step 3: Implementing JavaScript Functionality
Now, let's add the JavaScript code to make our to-do list functional. Create a new JavaScript file called "app.js" and include the following code:
// Selecting DOM elements const todoInput = document.getElementById('todo-input'); const addButton = document.getElementById('add-button'); const todoList = document.getElementById('todo-list'); // Event listener for adding a new task addButton.addEventListener('click', addTask); // Function to add a new task function addTask() { const taskText = todoInput.value; if (taskText.trim() !== '') { const listItem = document.createElement('li'); listItem.classList.add('todo-item'); const checkbox = document.createElement('input'); checkbox.setAttribute('type', 'checkbox'); checkbox.addEventListener('change', toggleTask); const label = document.createElement('label'); label.innerText = taskText; listItem.appendChild(checkbox); listItem.appendChild(label); todoList.appendChild(listItem); todoInput.value = ''; } } // Function to toggle task completion function toggleTask(event) { const checkbox = event.target; const listItem = checkbox.parentNode; listItem.classList.toggle('completed'); }
Outcome :
.png)
Conclusion:
Congratulations! You have successfully built a simple to-do list application using HTML, CSS, and JavaScript. This project serves as a great starting point for your coding journey, and you can further expand its functionality and design according to your requirements.
Feel free to explore and experiment with this code to enhance your understanding of web development. Stay tuned for more exciting coding projects and tutorials on our blogger website!
Happy coding! 💻
