This is a classic to-do-list Web app. It is useful for writing out tasks that you want to get done throughout the day and assigning them a category. Let's get to see the source code behind this. First is the HTML.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do Web App</title>
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<!-- Logo -->
<div class="img-container">
<img src="./assets/logo.png"/>
</div>
</header>
<!-- Main Area -->
<main>
<div class="input-container">
<div id="msg">What do you want to get done today?</div>
<div id="msg">(Enter the name of the list)</div>
<form>
<label for="task"></label>
<input type="text" id="userinput" name="task" placeholder="e.g Pay Bills...">
<input type="text" id="namelist" name="namelist" placeholder="e.g Shopping List...">
<input type="button" value="Add" id="btn" onclick="tasklist()" title="✔️ Adds an item to list">
<button onclick="reset()" id="reset" title="🔃 Refreshes the page">Reset</button>
</form>
<br>
<p id="warning"></p>
<p id="warning1"></p>
</div>
<!-- Container -->
<div id="containertodo">
<div class="todo"></div>
<div id="todolistbr" class="todolist"></div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="footer">
Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank"><span>@mariosdaskalas</span></a>
</div>
</footer>
</body>
<!-- Javascript -->
<script src="./main.js"></script>
</html>
The basic idea behind this is to create 2 inputs and 2 buttons. The 2 inputs take the value of the task and the other one takes the category of it. There is a button that you can click on to add the task and one for clearing all input.
Below, it is the CSS file that is responsible for the design of the document.
* {
margin: 0;
padding: 0;
}
/* Body */
body {
background-color: lightgray;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* Header */
.img-container {
text-align: center;
}
img {
width: 200px;
}
/* Main */
.input-container {
text-align: center;
}
#msg {
text-align: center;
font-size: 125%;
font-style: italic;
margin-bottom: 1rem;
}
#warning, #warning1 {
background-color: rgb(202, 88, 105);
width: 45%;
height: 1.8rem;
text-align: center;
margin: 0 auto;
display: none;
font-size: 120%;
font-style: italic;
font-weight: bold;
text-decoration: underline;
position: relative;
left: 1.6rem;
}
/* Input */
input[type=text] {
width: 25%;
height: 2rem;
text-align: center;
font-size: 110%;
border-radius: 4px;
}
input[type=text]:hover {
background-color: rgba(240, 158, 8, 0.65);
}
#btn, #reset {
width: 5rem;
height: 2.2rem;
padding: 0.4rem;
background-color: black;
color: white;
border-radius: 4px;
}
#btn:hover, #reset:hover {
cursor: pointer;
}
input[type="checkbox"] {
text-align: center;
font-size: 120%;
margin: 0 auto;
border-bottom: 1px solid grey;
margin-bottom: 0.5rem;
background-color: lightgrey;
}
#namelist {
width: 12rem;
height: 2rem;
text-align: center;
font-size: 110%;
border-radius: 4px;
}
.todolist, #donelist {
text-align: center;
font-size: 150%;
background-color: lightgray;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid grey;
}
label {
margin: 1.5rem;
}
.btnclass {
width: 1.5rem;
height: 1.5rem;
position: relative;
bottom: 0.2rem;
}
#containertodo {
margin: 0 auto;
width: 45%;
height: 300px;
background-color: rgba(170, 168, 163, 0.65);
position: relative;
top: 1rem;
left: 1.5rem;
display: none;
border-radius: 7px;
}
#containerdone {
margin: 0 auto;
width: 75%;
height: 300px;
background-color: rgba(170, 168, 163, 0.65);
position: relative;
display: none;
top: 2rem;
border-radius: 7px;
}
.title {
text-align: center;
font-size: 110%;
text-decoration: underline;
font-style: italic;
font-weight: bold;
margin-top: 0.5rem;
}
.todo, .done {
text-align: center;
font-size: 160%;
text-decoration: underline;
font-weight: bold;
padding: 1rem;
font-style: italic;
}
/* Responsive Design */
@media screen and (max-width: 580px) {
img {
width: 300px;
}
}
/* Footer */
.footer {
text-align: center;
font-size: 110%;
background-color: rgb(236, 232, 232);
margin: 0 auto;
width: 45%;
height: 2rem;
position: relative;
top: 2rem;
left: 1.5rem;
}
/* Links */
a, a:visited {
color: black;
text-decoration: none;
}
a:hover {
font-weight: bold;
text-decoration: underline;
}
Finally, let's see the logic behind this Web App and this is the JS file.
// Create empty array
let arrList = [];
let arrListDone = [];
let taskEnter = document.getElementById("userinput");
let nameEnter = document.getElementById("namelist");
// Insert on key Enter
taskEnter.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
e.preventDefault();
tasklist(e);
}
});
nameEnter.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
e.preventDefault();
tasklist(e);
}
});
// Trigger on button "Add"
function tasklist() {
// Fetch value of input text
task = document.getElementById("userinput").value;
let namelist = document.getElementById("namelist").value;
// Display name of list
let todolistname = document.querySelector(".todo").innerHTML = namelist;
// If input fields are empty
if (task == "" || namelist == "") {
document.getElementById("warning").innerHTML = "Please complete both fields!";
document.getElementById("warning").style.display = "block";
}
// If input fields are not empty
else {
document.getElementById("warning").style.display = "none";
document.getElementById("namelist").disabled = true;
document.getElementById("namelist").title = "🚫 Disabled!";
// Select DIV
let todolist = document.querySelector(".todolist");
// Clears text input
document.getElementById("userinput").value = "";
// Shows container
document.getElementById("containertodo").style.display = "block";
// Create input element
let input = document.createElement("input");
// Generates a random number for id
let random = Math.floor(Math.random() * 1000);
let randomlabel = Math.floor(Math.random() * 1001 + 1000);
let randombr = Math.floor(Math.random() * 100);
let btnrem = Math.floor(Math.random() * 1001 + 2000);
// Assign attributes
input.type = "checkbox";
input.name = "checklist";
input.value = task;
input.id = random;
input.className = "checkclass";
// Create label element
let label = document.createElement("label");
// Assign label
label.htmlFor = random;
label.id = randomlabel;
label.className = "labelclass";
// Create button
let btnremove = document.createElement("input");
// Assign buttton attributes
btnremove.type = "button";
btnremove.value = "X";
btnremove.id = btnrem;
btnremove.title = "❌ Remove item";
btnremove.className = "btnclass";
// Append childs
label.appendChild(document.createTextNode(task));
todolist.appendChild(input);
todolist.appendChild(label);
todolist.appendChild(btnremove);
// Create br element
let br = document.createElement("br");
br.id = randombr;
// Append child
todolist.appendChild(br);
// Push to array
arrList.push(task);
// Select element based on class + id
let t1 = document.querySelectorAll(".checkclass");
let t2 = document.querySelectorAll(".labelclass");
let t3 = document.getElementById(randombr);
let t4 = document.getElementById(btnrem);
// If remove btn clicked
t4.onclick = () => {
console.log(`Button clicked! ${btnrem}`);
// Select <br> with id
let parent = document.getElementById(randombr);
let varbr = parent.getElementsByTagName("br");
// Remove <br> with id
parent.parentElement.removeChild(parent);
let randomrem = document.getElementById(random);
let randomlblrem = document.getElementById(randomlabel);
// Hide items on click remove button
randomrem.style.display = "none";
randomlblrem.style.display = "none";
t4.style.display = "none";
}
// Loop through list array
for (let i = 0; i <= arrList.length - 1; i++) {
// If checkbox is checked
t1[i].onclick = () => {
if (t1[i].checked) {
console.log(`Checked ${i}: ${t1[i].value}`);
t2[i].style.textDecoration = "line-through";
t2[i].style.backgroundColor = "lightgreen";
}
// If checkbox is not checked
else {
console.log(`Not Checked ${i}: ${t1[i].value}`);
t2[i].style.textDecoration = "none";
t2[i].style.backgroundColor = "lightgray";
}
}
}
}
}
// Reloads the webpage
function reset() {
location.reload();
};
At first, we check if either one of the inputs is empty. If this is true, then provide a message stating that. If we get an input then create a new element of input that is a checkbox. That element will hold the values that the user enters and displays them as a div on the screen.
The user can check each of the boxes to mark them as complete or click on the 'X' icon to delete them completely. A change in CSS is happening (background-color green and strikethrough), when the user marks the task as complete. Closing, the page is refreshed when the user clicks the Reset button.
Subscribe to our email newsletter and unlock access to members-only content and exclusive updates.
Comments