To-Do List

In this article, I will show you how to create a simple to-do list using HTML, CSS, and JavaScript in Visual Studio Code.

Step 1: Set up your project structure. Create a new folder for your project and then create three files inside it: index.html, styles.css, and script.js.

Step 2: Open Visual Studio Code and add the following code to index.html:

“`

To-Do List

“`

Step 3: Add the following code to styles.css to style our to-do list:

“`css
body {
font-family: Arial, sans-serif;
}

#todoContainer {
margin-bottom: 20px;
}

#todoInput {
padding: 5px;
margin-right: 10px;
}

ul {
list-style: none;
padding: 0;
}

li {
margin-bottom: 10px;
}
“`

Step 4: Add the following code to script.js to implement the functionality of the to-do list:

“`javascript
function addTodo() {
var todoInput = document.getElementById(‘todoInput’);
var todoList = document.getElementById(‘todoList’);
var newTodo = document.createElement(‘li’);
newTodo.innerText = todoInput.value;
todoList.appendChild(newTodo);
todoInput.value = ”;
}
“`

Step 5: Open index.html in a web browser and start adding to-dos to your list!

That’s it! You’ve just created a simple to-do list using HTML, CSS, and JavaScript in Visual Studio Code. You can further enhance this project by adding features such as marking tasks as completed, deleting tasks, or saving the to-do list to local storage. With some additional CSS and JavaScript, you can create a fully functional and visually appealing to-do list.