JSFiddle - React, Tailwind, and code Playground

by davehawkins

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>To-Do's (0)</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="title">
        <h2>To do list</h2>
      </div>
      <div class="inputContainer">
        <input type="text" id="todoInput" placeholder="Add a to do" />
        <span onclick="addTodo()" class="addBtn">Add</span>
      </div>
      <div class="the-todos">
        <div class="todo-title">
          <span>Todo's </span><span>(</span><span id="todoNum">0</span
          ><span>)</span>
        </div>
      </div>
      <ul id="to-dos"></ul>
    </div>

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

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #f3f4f6;
}

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

.container {
  display: flex;
  flex-direction: column;
  padding: 30px 40px;
  color: #374151;
  max-width: 400px;
  margin: 0px auto;
  margin-top: 120px;
}

.title {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 0;
}

h2 {
  font-size: 16px;
  font-weight: 700;
}

.logo {
  height: 20px;
  width: 20px;
  color: #9ca3af;
}

input[type="checkbox"] {
  align-items: center;
  vertical-align: bottom;
  margin: 0;
}

.todo-title {
  font-size: 14px;
  margin: 0 0 12px 0;
}

label {
  display: block;
  cursor: pointer;
  margin-left: 8px;
}

ul li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 12px 8px 12px 12px;
  font-size: 15px;
  transition: 0.2s;
}

ul li:hover {
  color: #111827;
  background: #f9fafb;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.inputContainer {
  display: flex;
  flex-direction: column;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #d1d5db;
}

.addBtn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 14px;
  line-height: 1.25rem;
  font-weight: 500;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #d1d5db;
  width: fit-content;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.addBtn:hover {
  background-color: #f9fafb;
}

.the-todos {
  margin-top: 16px;
}

JavaScript

function addTodo() {
  let li = document.createElement("li");
  li.id = "to-do";

  let inputValue = document.getElementById("todoInput").value;

  let checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = "to-do";
  checkbox.id = "listElement";
  li.appendChild(checkbox);

  let label = document.createElement("label");
  label.htmlFor = "listElement";
  label.appendChild(document.createTextNode(inputValue));
  li.appendChild(label);

  if (inputValue === "") {
    alert("Input field can't be blank");
  } else {
    document.getElementById("to-dos").appendChild(li);
  }
  document.getElementById("todoInput").value = "";

  let liCounter = document.getElementsByTagName("li").length;
  document.getElementById("todoNum").innerHTML = liCounter;
}