Building a Simple To-Do App with Vanilla JavaScript

Creating a to-do app is a classic project for learning and practicing JavaScript. In this tutorial, we'll build a simple to-do app using only HTML, CSS, and Vanilla JavaScript. No frameworks or libraries, just pure coding fun!

1. HTML Structure

We'll start by creating the HTML structure for our to-do app. Create an HTML file and add the following code:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>To-Do App</title>
  <link rel='stylesheet' href='styles.css'>
</head>
<body>
  <div id='app'>
    <h1>My To-Do List</h1>
    <input type='text' id='task' placeholder='New Task'>
    <button onclick='addTask()'>Add Task</button>
    <ul id='tasks'></ul>
  </div>
  <script src='script.js'></script>
</body>
</html>

2. CSS Styling

Next, we'll add some basic styling to make our app look nice. Create a CSS file named 'styles.css' and add the following code:

#app {
  width: 300px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

#task {
  width: 200px;
  padding: 5px;
}

#tasks li {
  list-style: none;
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px 0;
}

3. JavaScript Functionality

Now, let's add the JavaScript functionality to manage tasks. Create a JavaScript file named 'script.js' and add the following code:

function addTask() {
  const taskInput = document.getElementById('task');
  const taskText = taskInput.value.trim();

  if (taskText.length > 0) {
    const taskList = document.getElementById('tasks');
    const taskItem = document.createElement('li');
    taskItem.textContent = taskText;

    // Add delete button
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.onclick = function() {
      taskList.removeChild(taskItem);
    };
    taskItem.appendChild(deleteButton);

    taskList.appendChild(taskItem);
    taskInput.value = '';
  }
}

4. Testing and Improvements

Open the HTML file in your browser, and you should see the to-do app working. You can add tasks and delete them using the 'Delete' button.

Feel free to customize the app further by adding features like task editing, marking tasks as done, or saving tasks to local storage.

Conclusion

Building a simple to-do app with Vanilla JavaScript is a rewarding project that helps you practice essential web development skills. By following this tutorial, you've created a functional to-do app using only HTML, CSS, and JavaScript. Keep experimenting and happy coding!