INTRODUCTION
If you have just started off learning the basic frontend developer package, which we all know is our favourite HTML, CSS and JavaScript (the one we hate!). Starting off with mini projects is great way to help you study. Most of us have used a To-do list maybe once, or twice in our lives. Its pretty simple, you type in the tasks you want to complete for the day, tick them off when you finish up with those tasks. Now imagine you making one for yourself? Cool isn't it? You get to choose your own layout, the colors you want to see etc. We will begin off really simple, first of all we are going to create the 'skeleton' of the to-do list;
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div id="TodoDiv" class="header">
<h2>To-Do List</h2>
<!-- To add a new item -->
<!-- <form id="TodoDiv"> -->
<input type="text" id="todo-item" placeholder="Add new task" required />
<!-- <input type="submit" id="todo-save" /> -->
<span onclick="newElement()" class="todo-save">Submit</span>
<!-- </form> -->
</div>
</br>
<ul id="myUL">
<li class="checked">Pay bills</li>
<li>go to work</li>
</ul>
</body>
</html>
First off, we create a div to have a nice box where a user can type in their tasks, then we create a random list of tasks for the purpose of this project. The code above should look like this when you run it;
After we are done with our html code, which looks like crap and very boring, we now go ahead to add some color to it with CSS.
CSS CODE
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
/* to remove the margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* to style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
margin-left: 25%;
margin-right: 25%;
list-style-type: none;
background: #ddd;
font-size: 18px;
transition: 0.2s;
/* to make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* setting a color on the background when you hover */
ul li:hover {
background-color: rgb(255, 163, 77);
}
/* When clicked on, it will add a background color and strike out text */
ul li.checked {
background-color: rgba(18, 18, 43, 0.475);
color: white;
text-decoration: line-through;
}
/* add a checked mark when task is performed */
ul li.checked::before {
content: "";
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* styling the header */
.header {
background: radial-gradient(
circle at -8.9% 51.2%,
rgb(255, 124, 0) 0%,
rgb(255, 124, 0) 15.9%,
rgb(255, 163, 77) 15.9%,
rgb(255, 163, 77) 24.4%,
rgb(19, 30, 37) 24.5%,
rgb(19, 30, 37) 66%
);
padding: 30px 40px;
color: white;
text-align: center;
}
/* styling the input box */
h2 {
font-size: 20px;
}
#todo-item {
width: 50%;
padding: 10px;
border-radius: 10px;
}
/* clearing the floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* styling the text input box */
.TodoDiv {
margin: 0;
border: none;
border-radius: 10px;
width: 75%;
padding: 10px;
float: center;
font-size: 16px;
}
.todo-save {
padding: 8.5px;
background: rgb(255, 124, 0);
color: white;
cursor: pointer;
transition: 0.3s;
border-radius: 10px;
}
#todo-save:hover {
background-color: #bbb;
color: black;
}
JAVASCRIPT CODE
//Creating the close button
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 = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("todo-item").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("todo-item").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
The final result should look like this;
CONCLUSION
This is a very basic todo-list you can do within some few hours using just HTML,CSS and JavaScript! Thanks for the read.
Top comments (0)