Create a Task List in Html

Friday, April 16, 2021 • 5 minutes to read

Tutorial2021htmlmaterial-uigithub-pages

In this post, we are building a task list in HTML using material css.

The tasks will save in the browser local storage.

In the end, the app can be hosted on GitHub Pages.

The code is available on GitHub.

Demo App

The final app will look like this.

cover

Project Setup

Create a html-task-list directory.

1|- html-task-list
2	|- icons
3	|- index.html
4	|- style.css
5	|- tasks.js

index.html

Create a index.html and paste the code.

In the head, favicon icons, material css, tasks.js, google fonts are imported.

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7    <link
 8      rel="apple-touch-icon"
 9      sizes="180x180"
10      href="/icons/apple-touch-icon.png"
11    />
12    <link
13      rel="icon"
14      type="image/png"
15      sizes="32x32"
16      href="/icons/favicon-32x32.png"
17    />
18    <link
19      rel="icon"
20      type="image/png"
21      sizes="16x16"
22      href="/icons/favicon-16x16.png"
23    />
24    <link rel="manifest" href="/icons/site.webmanifest" />
25    <!-- Compiled and minified CSS -->
26    <link
27      rel="stylesheet"
28      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
29    />
30    <link rel="preconnect" href="https://fonts.gstatic.com" />
31    <link
32      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
33      rel="stylesheet"
34    />
35    <link
36      href="https://fonts.googleapis.com/icon?family=Material+Icons"
37      rel="stylesheet"
38    />
39
40    <link rel="stylesheet" href="./style.css" />
41    <!-- Compiled and minified JavaScript -->
42    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
43    <script src="./tasks.js"></script>
44    <script>
45      // onload render the previous tasks
46      window.addEventListener("load", renderTaskList);
47    </script>
48    <title>Task List</title>
49  </head>
50  <body>
51    <div class="container">
52      <span>
53        <header>
54          <i class="large material-icons" style="vertical-align: text-bottom"
55            >chrome_reader_mode</i
56          >
57          Task List
58        </header></span
59      >
60      <main>
61        <div class="row">
62          <div class="input-field col s12">
63            <input
64              id="task"
65              type="text"
66              class="validate"
67              onkeypress="clickPress(event)"
68            />
69            <label for="task">Task</label>
70          </div>
71        </div>
72        <div class="row">
73          <ul id="tasks" class="collection"></ul>
74        </div>
75      </main>
76
77      <footer class="center">
78        <div class="footer-copyright">
79          <div class="container">
80            Made with <span style="color: red">❤️</span> by
81            <a href="https://schadokar.dev">schadokar</a>
82          </div>
83          <div class="container">
84            Ingredients <span> 🧪</span> html, css and
85            <a href="https://materializecss.com/">material ui</a>
86          </div>
87          <div class="container">
88            <a href="https://github.com/day-to-day-coding/html-task-list"
89              ><i class="material-icons">code</i></a
90            >
91          </div>
92        </div>
93      </footer>
94    </div>
95  </body>
96</html>

style.css

Create a style.css and paste the code.

 1body {
 2  background-color: white;
 3  color: black;
 4  background-size: auto;
 5  background-repeat: no-repeat;
 6  font-family: "Pacifico", cursive;
 7  display: flex;
 8  flex-direction: column;
 9}
10
11header {
12  font-size: xx-large;
13  margin-bottom: 50px;
14}
15
16main {
17  flex: 1 0 auto;
18}
19
20input {
21  font-family: "Pacifico", cursive;
22}
23
24.vertical-divider {
25  border-left: 1px solid gray;
26}
27
28.page-footer .footer-copyright {
29  background-color: white;
30}
31
32.task-delete {
33  float: inline-end;
34}

tasks.js

Create a tasks.js and paste the code.

 1function clickPress(event) {
 2  // on press enter run the saveTask
 3  if (event.keyCode == 13) {
 4    saveTask(document.getElementById("task").value);
 5  }
 6}
 7
 8function saveTask(task) {
 9  const taskList = JSON.parse(localStorage.getItem("tasklist"));
10  // tasklist is null then create a new empty array
11  if (!taskList) {
12    taskList = [];
13  }
14  // push the task and its status
15  taskList.push({
16    task: task,
17    done: false,
18  });
19
20  // save the updated tasklist
21  localStorage.setItem("tasklist", JSON.stringify(taskList));
22  // render the updated tasklist
23  renderTaskList();
24  // clear the input field
25  document.getElementById("task").value = "";
26}
27
28function renderTaskList() {
29  const taskList = JSON.parse(localStorage.getItem("tasklist"));
30  // get ui element
31  const ui = document.getElementById("tasks");
32  // clear ui content else it will keep append
33  ui.textContent = "";
34  // check if taskList is not empty
35  if (taskList) {
36    taskList.forEach((task, index) => {
37      // create a li element
38      const liElement = document.createElement("li");
39      liElement.id = index;
40      liElement.className = "collection-item";
41      // create a checkbox input
42      const checkbox = document.createElement("label");
43      const input = document.createElement("input");
44      input.id = index;
45      input.type = "checkbox";
46      input.setAttribute("onclick", `taskStatusToggle(${index})`);
47      // check if task is done
48      if (task.done) {
49        input.setAttribute("checked", "checked");
50      }
51      // task text in span
52      const span = document.createElement("span");
53      span.style = "color: black;";
54      span.textContent = task.task;
55
56      checkbox.appendChild(input);
57      checkbox.appendChild(span);
58      liElement.appendChild(checkbox);
59      // create a btn element
60      const btn = document.createElement("a");
61      btn.className = "waves-effect waves-red btn-flat task-delete";
62      btn.setAttribute("onclick", `deleteTask(${index});`);
63
64      // create an icon element
65      const icon = document.createElement("i");
66      icon.textContent = "delete";
67      icon.className = "material-icons prefix";
68      // make icon child of btn
69      btn.appendChild(icon);
70      // make btn child of liElement
71      liElement.appendChild(btn);
72      ui.appendChild(liElement);
73    });
74  }
75}
76
77function taskStatusToggle(index) {
78  const taskList = JSON.parse(localStorage.getItem("tasklist"));
79  // toggle the status from true to false and false to true
80  taskList[index]["done"] = !taskList[index]["done"];
81  // save the updated list
82  localStorage.setItem("tasklist", JSON.stringify(taskList));
83  renderTaskList();
84}
85
86function deleteTask(index) {
87  const taskList = JSON.parse(localStorage.getItem("tasklist"));
88  if (taskList) {
89    // remove the index element from the array
90    taskList.splice(index, 1);
91    // save the updated tasklist
92    localStorage.setItem("tasklist", JSON.stringify(taskList));
93    renderTaskList();
94  }
95}

favicons

You can create custom favicon on favicon.io and save in icons folder.

You can download this app's icons from GitHub.

Run

Open the index.html in the browser and test it.

To run it as server, install serve using npm install --global serve. Install nodejs first to run npm command.

Open the terminal or cmd in the project and run serve.

This will start a server at localhost:5000 and serve index.html.

Host it

You can host it on GitHub Pages.

Create a html-task-list repository on the GitHub. You can name it anything.

Open the terminal or cmd in the project and instantiate git init.

Stage and commit the code.

1git init
2git add .
3git commit -m 'task app is complete'

Open GitHub repo and copy the repo url. Add it as origin and push the code to the GitHub.

1git remote add origin https://github.com/<Your username>/<repo name>.git
2git branch -M main
3git push -u origin main

Open the GitHub repo settings and go to pages.

Under Source, select the main branch, /root folder and save it.

The app is now live at

1https://<Your Username>.github.io/<your repo name>/

Tutorial2021htmlmaterial-uigithub-pages

PreviousCreate a Cryptocurrency Exchange Rate in Html Part 1

NextHow to Run Javascript Code