Check the application is online: https://ziizium.github.io/my-webdev-notes/todoapp/
We all keep a list of things we'll like to do in the future and conventionally we use pen and paper. Then as technology advances, we use mobile and online applications to keep track of our daily activities.
A to-do list application is a mobile or an online application that allows us to keep track of our activities. There are many to-do list applications online, this experiment is about creating a minimalist to-do list application using HTML, CSS, and JavaScript, and with one addition: dark mode.
The HTML
The HTML code consist of noscript
tag with information that is displayed to users with JavaScript turned off or disabled in their browser.
The header
tags consist of the toggle switch used for switching to night mode
Then in the main
tag, we have the form instruction, the form itself, the un-ordered list that will contain the generated li
tags which in turn will contain the names of each to-do item.
Then at the bottom of the page, we link to two separate files polyfill.js
and tasklist.js
<body id="body">
<noscript> <!-- Shown to browsers with JavaScript disabled -->
<p style="padding: 0.5em; text-align: center; font-size: 1.2em;">This application works best with JavaScript enabled in your browser.</p>
</noscript>
<header class="header" id="header">
<div class="header__inner">
<h2><a href="index.html">To Do List</a></h2>
<form>
<label class="changeTheme" id="changeTheme-js">
<input type="checkbox" id="changeTheme" class="changeTheme__input">
<div class="changeTheme__slider round"></div>
</label>
</form>
</div>
</header>
<main>
<div class="row">
<div class="form-instruction" id="form-instruction">
<em>The following are allowed: letters, numbers, commas, apostrophes, hyphens, question marks, and spaces</em>
</div>
<form class="taskForm">
<label for="taskForm__input" class="taskForm__label visuallyHidden">Enter TO DO</label>
<input type="text" id="taskForm__input" placeholder="Enter your task name" class="taskForm__input">
<input id="taskForm__submitInput" type="submit" name="addTask" value="Add Task" class="taskForm__submitInput">
</form>
</div>
<!-- The tasks will be list items in an un-ordered list-->
<ul id="taskList" class="taskList"></ul>
</main>
<!-- We require a polyfill for the ChildNode.remove() method which is not
supported in IE -->
<script src="polyfill.js"></script>
<script src="tasklist.js"></script>
The CSS
The CSS used in styling the application is not explained in detail because it's not the focus of this experiment but you can check styles.css in the GitHub repository.
The JavaScript
JavaScript is the essential part of the application (excluding the code that's used for switching to dark mode) therefore, we'll dissect it together.
Tha pseudocode for creating the to-do item is as follows:
- Get the user input
- Verify it's in the right format
- Create the task item
We'll be selecting a lot of HTML elements via their attributes so it is best if we have a single function for doing this instead of typing multiple API methods every time we need one.
let $ = function (selector) {
return document.querySelector(selector);
};
Next, we'll be validating the user input to prevent them from entering unwanted data in the form input. We'll use regular expression for this. The regular expression will only allow letters, numbers, spaces, hyphens, apostrophe, and question marks. You can make the regular expression better and adapt it to your needs.
let validateInput = function (strValue) {
var objRegExp = /^[0-9a-zA-z\s\-\.\'\?]+$/; // specify allowed characters
return objRegExp.test(strValue); // test the string against the specified pattern
};
We use the remove()
method to delete a task when it's no longer needed. There is a tendency that you'll create many to-do's therefore, we create a function that is attached to all to-do items.
let removeParent = function (classname) {
let div = this.parentElement;
div.remove();
};
Next, we need to get the name of the to-do task via the form input and we'll use this name to create the to-do item.
The to-do item will be created when the user submits the form. All we have to do is check when the user clicks on the submit button then we create the to-do task.
We'll make use of an anonymous function to create the to-do task. Inside the function, we perform the following steps:
- Trim white-spaces from the beginning and the end of the input
- Validate the input
- Create a new
li
tag - Create a new variable named
newTask
and set it tofalse
- If the input validation passes
- The input is passed to the
createTextNode()
method and assigned to thenewTask
variable
- The input is passed to the
- Else the form input is cleared and we alert the user
- If the
newTask
is not empty and notfalse
:- The form input is cleared
- The
li
is appended to theul
- The to-do task is appended to the
li
- Create an element that will be used to delete the task
- Add a class name to the created element
- Append this element to the
li
- Attach an event handler and set it to
removeParent
- Prevent the form from submitting
The resulting JavaScript Code:
$('.taskForm').onsubmit = function() {
let taskName = $("#taskForm__input").value.trim();
let validatedData = validateInput(taskName);
let taskItem = document.createElement('li');
let newTask = false;
if (validatedData && validatedData !== "") {
newTask = document.createTextNode(taskName); // create the name of the task
} else {
taskForm__input.value = ""; // clear the form input
alert("Your task name contains invalid characters");
}
if (newTask !== "" && newTask !== false) {
taskForm__input.value = ""; // Clear the form input
taskList.appendChild(taskItem);
taskItem.appendChild(newTask);
let deleteTask = document.createElement("SPAN");
let deleteIcon = document.createTextNode("\u00D7");
deleteTask.className = "delete-task";
deleteTask.appendChild(deleteIcon);
taskItem.appendChild(deleteTask);
}
let getDeleteTask = $("#taskList").getElementsByClassName('delete-task');
for (let i = 0; i < getDeleteTask.length; i++) {
getDeleteTask[i].onclick = removeParent;
}
// Prevent the form from submitting
return false;
}
When you mark a to-do item as done, a little check mark as added before it, a strike-through text-decoration
is applied to the text and the background color is changed. All this possible thanks to JavaScript. Let's explain how it works.
The JavaScript code has to listen for an event, in this case, it will listen for the click event i.e when the user clicks on the unordered list (ul
) that contains the to-do tasks (li
). When this happens we write a function that accepts an event as a parameter and ensures that a li
tag was actually clicked. How can we do this?
Well, events have a target
attribute associated with it, here the target
is the HTML li
tags. The name of li
tags is available in its capitalized form i.e LI
to the target
attribute via the tagName
attribute.
After checking that the li
tag was actually clicked, we use the classList
which has a toggle
attribute to add the CSS checked
class to the li
tag.
// We get the unordered list which contains the list
// items
let taskList = $('#taskList');
// Attach an event
taskList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('checked')
}
}, false);
Here is the CSS that gets added to the li
tags:
.taskList li.checked {
background: #888888;
color: #ffffff;
text-decoration: line-through;
}
The remaining JavaScript code is for adding dark mode functionality.
The Github repo:
ziizium / my-webdev-notes
Code snippets for series of articles on DEV about my experiments in web development
My WebDev Notes
This repositiory contains code snippets, and links for series of articles on DEV about my experiments in Web development.
List of articles
- My WebDev Notes: CSS Loaders published on the 25th February 2020
- My WebDev Notes: Filter table published on the 1st April 2020
- MyWebDev Notes: Center page elements with CSS Grid published on the 3rd of April 2020
- My WebDev Notes: Photo gallery with CSS Grid published on the 7th of April 2020
- My WebDev Notes: Fullscreen overlay navigation published on the 13th of April 2020
- My WebDev Notes: A simple and accessible accordion published on 28th of April 2020
- My WebDev Notes: How to create a tooltip with HTML and CSS published on 3rd February 2021
- How to create a modal published on 22nd June 2021
Have fun!
Top comments (0)