Todo App - ES5 & ES6 - Local Storage

In this post, we will make a Todo Application with Vanilla Javascript.

If you want to see other features and ES6 - Local Storage version look this Repository

---

Step 1: Create UI

I used Bootstrap Library in UI.

  <div class="container py-5">
    <!-- Title -->
    <h1 class="text-center">TODO App</h1>

    <div class="col col-md-8 col-lg-6 my-5 mx-auto">
      <!-- Form -->
      <form class="form">
        <div class="form-group d-flex">
          <input
            type="text"
            class="input form-control bg-transparent text-light"
            placeholder="Add TODO"
          />
          <div class="px-2"></div>
          <button type="submit" class="btn btn-success px-4">Add</button>
        </div>
      </form>

      <!-- Todo Table -->
      <table class="table table-dark table-bordered table-responsive text-center mt-5">
        <thead>
          <tr>
            <td><strong>Task</strong></td>
            <td></td>
          </tr>
        </thead>
        <tbody class="todo-list"></tbody>
      </table>
    </div>
  </div>

Step 2: Add functionality with Javascript.

"let" and "const" keywords are belongs to ES6.

// A function for less code.
function select(query) {
  return document.querySelector(query);
}

// Variables
const form = select(".form");
const list = select(".todo-list");
const input = select(".input");

// Objects
function Todo(task) {
  this.task = task;
}

function UI() {}

UI.prototype.create = function (todo) {
  const html = `
    <tr>
      <td>${todo.task}</td>
      <td><button class="btn btn-sm btn-danger delete">Delete</button></td>
    </tr>
        `;
  list.innerHTML += html;
};


// Functions
function createTodo(e) {
  const task = input.value;

  // Constructors
  const ui = new UI();
  const todo = new Todo(task);

  // Add to list
  ui.create(todo);

  // Clear Input

  // Prevent form submit
  e.preventDefault();
}

// Listeners
form.addEventListener("submit", function (e) {
  createTodo(e);
});

If you want to see other features and ES6 - Local Storage version look this Repository