In this tutorial I will show you how to make a tool that I use almost every day. It is a TO-DO list making web app. It helps me to organise and plan out my day. It makes for a great beginner project for JavaScript.
Here you can find the Source Code
Setting up the base HTML
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width:device-width, initial-scale:1.0">
<title>to-do</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>To - Do</h1>
<div class="col-12">
<input id="userInput" type="text" placeholder="New item..." maxlength="150">
<button id="enter"></button>
</div>
<div class="listItems col-12">
<ul class="col-12 offset-0 col-sm-8 offset-sm-2"></ul>
</div>
</div>
<script type="text/javascript" src="external.js"></script>
</body>
</html>
As you can see we have an ul element with no list items. The list items will be created when the button is entered. We will achieve this with the JavaScript code.
JavaScript logic
1.First let's set up the variables we will use
var enterButton = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");
2.Make functions that calculate length of input and li
function inputLength(){
return input.value.length;
}
function listLength(){
return item.length;
}
3.Make the function that creates the list element
function createListElement() {
var li = document.createElement("li"); // creates an element "li"
li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
ul.appendChild(li); //adds li to ul
input.value = ""; //Reset text input field
//START STRIKETHROUGH
// because it's in the function, it only adds it for new items
function crossOut() {
li.classList.toggle("done");
}
li.addEventListener("click",crossOut);//when the li is clicked is marked done with the crossOut() function
//END STRIKETHROUGH
// START ADD DELETE BUTTON
var dBtn = document.createElement("button");
dBtn.appendChild(document.createTextNode("X"));
li.appendChild(dBtn);
dBtn.addEventListener("click", deleteListItem);//when X is clicked the li is deleted
// END ADD DELETE BUTTON
//ADD CLASS DELETE (DISPLAY: NONE)
function deleteListItem(){
li.classList.add("delete")//this is a class that makes display: none; of the li
}
//END ADD CLASS DELETE
}
This function makes an li element and appends it to the ul element. This function also allows for the highlight affect. And adds the button to delete the list item.
4.Make functions and event listeners that will run the CreateListItem function when Enter clicked or button clicked.
function addListAfterClick(){
if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return"
//the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
createListElement();
}
}
enterButton.addEventListener("click",addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
Style with CSS
Here is the code I used, I went for a simple look to make my routine easier you can choose to do whatever you want in this part since the important code is finished.
body {
background: #04A1BF;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
h1 {
padding-top: 1rem;
color: #ffffff;
text-transform: uppercase;
font-weight: 700;
font-size: 4rem;
}
#enter {
border: none;
padding: 7px 18px;
border-radius: 7px;
color: #04A1BF;
background-color: #025F70;
transition: all 0.75s ease;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75 ease;
font-weight: normal;
}
#enter:hover{
background-color: #02798F;
color: #FFCD5D;
}
ul {
text-align: left;
margin-top: 20px;
}
li {
list-style: none;
padding: 10px 20px;
color: #ffffff;
text-transform: capitalize;
font-weight: 600;
border: 2px solid #025f70;
border-radius: 5px;
margin-bottom: 10px;
background: #4EB9CD;
transition: all 0.75s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5 ease;
}
li:hover {
background: #76CFE0;
}
li > button {
font-weight: normal;
background: none;
border: none;
float: right;
color: #025f70;
font-weight: 800;
}
input {
border-radius: 5px;
min-width: 65%;
padding: 10px;
border: none;
}
.done {
background: #51DF70 !important;
color: #00891E;
}
.delete {
display: none;
}
The important points in the CSS file are the classes and ids of the buttons and list items. Make sure to make them stand out when doing this.
Thank you for reading
Hope this helps someone, if it didn't comment down bellow the problem you have and I will reach out.
Thank you again,
Stay safe,
~Jovan
Oldest comments (0)