Create a stylish animated to do list with HTML, CSS, Javascript

Creating a stylish animated to-do list is a fun and simple project that can be done with HTML, CSS, and JavaScript. Follow this guide to create your own to-do list with the ability to add and remove tasks dynamically.

Step 1: Setting Up the HTML

First, create the basic HTML structure for the to-do list. Here’s the HTML setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylish Animated To-Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="todo-list">
    <h2>To-Do List</h2>
    <ul>
      <li class="task">Task 1 <span class="close">×</span></li>
      <li class="task">Task 2 <span class="close">×</span></li>
      <li class="task">Task 3 <span class="close">×</span></li>
    </ul>
    <input type="text" id="taskInput" placeholder="New task...">
    <button id="addBtn">Add</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Next, style the to-do list to make it visually appealing. Here’s the CSS you need:

body {
  font-family: Arial, sans-serif;
  background-color: rgb(83, 23, 250);
}

.todo-list {
  max-width: 400px;
  margin: 150px auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #f6a801;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #333;
}

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

.task {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  position: relative;
  transition: background-color 0.3s;
}

.task:hover {
  background-color: #f0f0f0;
}

.close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
  font-weight: bold;
}

.close:hover {
  color: #666;
}

input[type="text"] {
  width: 70%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

Step 3: Adding Functionality with JavaScript

Finally, add JavaScript to control the to-do list. This script will manage adding and removing tasks:

document.getElementById("addBtn").addEventListener("click", function() {
  var inputValue = document.getElementById("taskInput").value;
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    var li = document.createElement("li");
    li.className = "task";
    li.textContent = inputValue;
    document.querySelector(".todo-list ul").appendChild(li);
    document.getElementById("taskInput").value = "";

    var span = document.createElement("span");
    span.className = "close";
    span.textContent = "×";
    li.appendChild(span);

    var close = document.getElementsByClassName("close");
    for (var i = 0; i < close.length; i++) {
      close[i].addEventListener("click", function() {
        var div = this.parentElement;
        div.style.display = "none";
      });
    }
  }
});

With this code, you now have a functional to-do list. You can add new tasks and remove them by clicking the close button. Feel free to modify the styles and functionality to suit your preferences.

Conclusion

Creating a stylish animated to-do list is a straightforward project that helps you understand the basics of HTML, CSS, and JavaScript. This guide provides a simple example that you can build upon. Happy coding!

---

Sky Code82

Search This Blog