JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Simple To-Do List</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Simple To-Do List</h1>
  <div class="todo-container">
    <input type="text" id="taskInput" placeholder="Enter a task">
    <button onclick="addTask()">Add Task</button>
  </div>
  <ul id="taskList"></ul>

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

CSS

h1 {
  text-align: center;
}

.todo-container {
  display: flex;
  margin-bottom: 10px;
}

input[type="text"] {
  flex-grow: 1;
  padding: 5px;
}

button {
  margin-left: 10px;
  background-color: lightgreen;
  border: 2px solid darkgreen;
  border-radius: 4px;
}


ul {
  list-style-type: none;
}

li {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.task-text {
  flex-grow: 1;
}

.remove-button {
  margin-left: 10px;
  background-color: pink;
  border: 2px solid darkred;
}

JavaScript

function addTask() {
  var input = document.getElementById("taskInput");
  var task = input.value;

  if (task === "") {
    alert("Please enter a task.");
    return;
  }

  var listItem = document.createElement("li");
  listItem.classList.add("task-item");

  var taskText = document.createElement("span");
  taskText.classList.add("task-text");
  taskText.textContent = task;

  var removeButton = document.createElement("button");
  removeButton.classList.add("remove-button");
  removeButton.textContent = "X Remove";
  removeButton.onclick = function() {
    removeTask(this);
  };

  listItem.appendChild(taskText);
  listItem.appendChild(removeButton);

  document.getElementById("taskList").appendChild(listItem);

  input.value = "";
}

function removeTask(button) {
  var listItem = button.parentNode;
  var list = listItem.parentNode;
  list.removeChild(listItem);
}