Why Lesser is better - Build a todo app with 19 lines of JavaScript

Why Lesser is better - Build a todo app with 19 lines of JavaScript

...It is possible! Just 19 lines of JavaScript

A todo app is probably the most used project to teach a tech newbie about a particular programming language or framework, yet most beginners do not understand the concepts being taught because some instructors happen to smash an ant with a sledge hammer. In this article, I will show you the step by step way to create a working todo app with just 19 lines of JavaScript in order to prove that Lesser is better

Build out the skeleton

To build the structure of the page, we will create a new html file and in the file write the following markups shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Todo app</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Fastr</h1>
        <i>...todo app to enhance productivity</i>
      </header>
      <main>
        <section>
          <div class="form-container">
            <form class="form">
              <input
                type="text"
                required
                placeholder="enter task"
                class="text-input"
                name="text-input"
              />
              <input type="submit" value="Add task" class="submit-input" />
            </form>
          </div>
          <div>
            <ol class="list"></ol>
          </div>
        </section>
      </main>
      <footer>
        <p>Copyright &copy; <a href="https://bonarhyme.com">Bonarhyme</a></p>
      </footer>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Style the page

I will add some basic styles, however, you can add more styles.

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

header {
  text-align: center;
  padding: 5rem 0;
  padding-top: 3rem;
  background-color: rgb(240, 240, 240);
}

h1 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-container {
  padding: 3rem 0;
  text-align: center;
}

.text-input {
  padding: 0.7rem 0.2rem;
  font-size: 1.2rem;
  width: 80%;
  max-width: 400px;
}
form {
  padding: 0.5rem;
}
.submit-input {
  padding: 0.7rem;
  font-size: 1.2rem;
  cursor: pointer;
}

footer {
  text-align: center;
}

ol {
  height: 200px;
  overflow: auto;
  margin: auto;
  display: block;
  width: 100%;
  max-width: 500px;
}
li {
  margin: 1rem;
  padding: 0.5rem;
  padding-left: 1rem;
  background-color: rgb(240, 240, 240);
 }

span {
  color: red;
  font-weight: 600;
  float: right;
  cursor: pointer;
}

Add the functionality

To make the todo app functional, we will do the following:

  1. Grab the text input, form and the ordered list from the Dom:
    const textInput = document.querySelector(".text-input");
    const submitInput = document.querySelector(".form");
    const todoList = document.querySelector(".list");
    
  2. Add an event listener of submit to the form and pass a function of handle submit as the second parameter:

    submitInput.addEventListener("submit", handleSubmit);
    
  3. Create the handle submit function above the event listener and prevent the form from causing the page to refresh on submit:

    function handleSubmit(e) {
    e.preventDefault();
    // Other codes will come below here
    }
    
  4. Create the list elements, add the user input as the content, also create an "X" that will serve as the remove button and append the list element to the todoList:

// Other codes will come below here
  const newLi = document.createElement("li");
  const newCon = document.createTextNode(textInput.value);
  const span = document.createElement("span");
  const spanCon = document.createTextNode("X");
  span.appendChild(spanCon);
  newLi.append(newCon, span);
  todoList.appendChild(newLi);
// Other codes will come below here

5- Clear the form and add an event listener of click to the remove button and a callback function to remove the item from the todo list:

// Other codes will come below here
  textInput.value = "";
  span.addEventListener("click", function () {
    todoList.removeChild(span.parentNode);
  });

Conclusion

We have come to the end and as you can see, the JavaScript codes were straight forward and was very easy to build. The end result can be seen below: