Posted by
Zhullyblog
on
- Get link
- X
- Other Apps
To do list app
Hello, welcome back to another series of web design tutorials. In this tutorial, we would be doing something different although might be boring to some but this project will help you understand JavaScript better. Jumpstart your frontend developer journey with web design series.
Prerequisites
In this tutorial, I assume that you have knowledge in HTML , CSS, JavaScript. If you don't have any,I urge you to familiarize yourself to avoid confusion.
Understanding the project
A to-do list app is basically a task management app used to create task, map out completed task, add task, delete irrelevant task and many more.
This tutorial will be very short, simple and clear, so please I would really love your feedback on Twitter.
Now, to the project.
Step 1
Create an HTML document, add all the features you want your to-do list to display. This is mine.
<!DOCTYPE html>
<html>
<head>
<title>How to create a to-do list </title>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px"> To Do List
Example</h2>
<input type="text" id="myInput"
placeholder="Add list...">
<span onclick="newElement()"
class="addBtn">Add</span>
</div>
<ul id="myUL">
<li class="checked">Read a book</li>
<li class="checked">Code for 6hrs</li>
<li>Do laundry</li>
<li>Go for medical check-up</li>
<li>Eat healthy food</li>
<li>Spend time with family</li>
</ul>
</html>
Step 2
Now that we have the HTML, let's spice it up by adding CSS
body {
margin: 0;
min-width: 250px;
}
.header {
background-color: #9400D3;
color: white;
padding: 30px 40px;
text-align: center;
}
.header:after {
content: "";
display: table;
clear: both;
}
ul {
margin: 0;
padding: 0;
}
ul li {
padding: 12px 8px 12px 40px;
background: #eee;
cursor: pointer;
position: relative;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:hover {
background: #ddd;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
top: 10px;
left: 16px;
position: absolute;
border-style: solid;
border-width: 0 2px 2px 0;
border-color: #fff;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.cancel {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px
}
.cancel:hover {
background-color: #f44336;
color: white;
}
input {
border: none;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
box-sizing: border-box;
}
.addBtn {
padding: 10px;
box-sizing: border-box;
width: 25%;
background: #FF1493;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
Step 3
JavaScript
The first thing you need to is to create an input so that user can enter task to their to-do list.
By default, we have 6 task list, so, with JavaScript, the user can enter more task. The example above shows that the user entered "Start a YouTube".
Once the user has entered a new task, it will be displayed in the task list.
The next thing step is to allow user mark task once it has been completed. By default, we marked two task. So, we need to add the ability to mark a task once it has been completed by the user.
The next is to add the ability to delete task once it is irrelevant.
var myNodelist = document
.getElementsByTagName("LI");
var i;
for(i=0; i < myNodelist.length;i++){
var span=document.createElement
("SPAN");
var txt=document.createTextNode
("\u00D7");
span.className = "cancel";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
var close = document
.getElementsByClassName("cancel");
var i;
for(i=0; i < cancel.length;i++){
cancel[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
var list=document.querySelector('ul');
list.addEventListener('click',
function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
function newElement() {
var li=document.createElement("li");
var inputValue=document
.getElementById("myInput").value;
var t = document.createTextNode
(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must enter a task!");
} else {
document.getElementById("myUL")
.appendChild(li);
}
document.getElementById("myInput")
.value = "";
var span=document.createElement
("SPAN");
var txt=document.createTextNode
("\u00D7");
span.className = "cancel";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < cancel.length; i++) {
cancel[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
Conclusion
Glad we successfully built a to-do list. I would be very glad if you fully understand the code.
Take-home test
Once again thanks for learning. And yes, I have a simple assignment for you.
• Create a to-do list app displaying the date a task must be completed.
Connect with me on Twitter . Let me know if you were able to complete it. Would be very glad if you do.
Please share
HTML
JavaScript
PHP
JAVA
Comments
Post a Comment