DEV Community: Oluwaseun Lawal

How to Add User Inputs from a Form to a Card Using JavaScript

Oluwaseun Lawal — Sun, 21 May 2023 13:15:33 +0000

Article Objective
At the end of this article, the reader will learn how to create a form and a set of cards, then how to add the inputs from the form (created with HTML and CSS) to a specific card (also created with HTML and CSS) all on a webpage using JavaScript.

Article Outline

Introduction
Prerequisites
Step 1: Creating a form with submit button (HTML & CSS)
Step 2: Creating four cards and styling them (HTML & CSS)
Step 3: Getting the form inputs (JavaScript)
Step 4: Adding the form inputs to the empty card (JavaScript)
Conclusion

Prerequisites

Have VS Code installed
Set up a project folder

Introduction

Forms can be created for different purposes on a website or blog. For instance, a form can be created to enable a user to subscribe to an online service or to submit a complaint on a website. Also, a form can be created to get feedback from the user of a website. So, whatever a form is meant to achieve is determined by the owner(s) of a website.

In this technical article, we are going to create a form that accepts user inputs; the form will have up to seven input fields in which a user can enter a laptop brand and their desired specifications. Thereafter, we will create a set of four cards listing laptop brands and their specifications. The first, second, and third cards are going to be pre-filled with specifications while the fourth card remains empty (input will come from the user).

Now using JavaScript, at the click of the “Submit” button, the user input from the form we created is then added to the empty card so that it looks like the other three cards. All of these are quite straightforward to achieve by following the steps I have outlined in this article.

Without further long talks, let’s get started.

Note: If you are just starting out learning HTML and CSS, follow Step 1 and Step 2 closely on how to create a form and a set of cards, respectively.
If you are already familiar with how to create a form and a set of cards using HTML and CSS, you can jump to Step 3 and continue.

Step 1: Creating a form with submit button (HTML & CSS)

The first thing we have to do is to open up our code editor (VS Code is used here) and create three separate files, which are:

index.html
style.css
script.js

We then get started under HTML by entering Shift + ! or inputting html5 and hitting enter to load up the default HTML codes. The next thing to do is to link the other two files (i.e., CSS and JavaScript) to our HTML file. The following explains better.

<!DOCTYPE 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>Form Input to a Card</title>

    <link rel="stylesheet" href="/style.css">

    <script defer src="/script.js"></script>
</head>

Note: ‘defer’ used in the JavaScript link is to tell the server to first load HTML and CSS files before executing JavaScript.

We proceed to create the form (using a form object in HTML) inside a container, and it will have the following inputs: a header, Laptop name, Processor, Generation, RAM, SSD, Screen size, and Backup.

 <div class="form-container">

        <h3>Laptop brand specifications</h3> <br> <br>

        <form action="">
            <input type="text" placeholder="Laptop name" class="laptop-name"> <br> <br>
            <input type="text" placeholder="Processor" class="laptop-processor"> <br> <br>
            <input type="text" placeholder="Generation" class="laptop-gen"> <br> <br>
            <input type="text" placeholder="RAM" class="laptop-ram"> <br> <br>
            <input type="text" placeholder="SSD" class="laptop-ssd"> <br> <br>
            <input type="text" placeholder="Screen size" class="laptop-screensize"> <br> <br>
            <input type="text" placeholder="Backup" class="laptop-backup"> <br> <br>

            <button class="btn" type="submit" onclick="submitBtn()">Submit</button>

        </form>

    </div>

In order to style the form and be able to access each of the input fields in JavaScript, we have to use a selector (class name) – as the screenshot above shows – for each of the input fields. The selectors can now be used to style the form in CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}


body
{
    background-color: rgb(196, 248, 255);
}

.form-container
{
    border: 2px groove;
    width: 230px;
    height: 400px;
    padding: 20px;
    border-radius: 5px;
    margin: 10px;
    background-color: azure;
}


form input{
    border: none;
    border-bottom:1px solid black ;
    background: none;
}

input:focus{
    outline: none;
}

.btn
{
    width: 80px;
    height: 25px;
    font-size: 15px;
    background-color: blue;
    color: white;
    border-radius: 5px;
    border-color: white;
}

The form will appear as follows:

We are done with creating the form, and we proceed to the next step.

Step 2: Creating four cards and styling them (HTML & CSS)

Here, we are going to create four cards, which will all have laptop brand specifications, out of which three of them will be pre-filled and the remaining one left blank. The four cards are each going to have the following selectors: card1, card2, card3, and output and be placed inside a parent container, which is going to have the selector specs-container. Each of the four cards is going to have a different image and similar styling (though with different background colors).

Here are the HTML codes to create the cards:

<section class="specs-container">

        <div class="specs-card">
            <img src="/Dell laptop.jpg" class="laptop-image" alt="">

            <ul class="specs-list">
                <li><b>Laptop name</b>: Dell</li>
                <li><b>Processor</b>: Intel Core i7</li>
                <li><b>Generation</b>: 8th</li>
                <li><b>RAM</b>: 16GB</li>
                <li><b>SSD</b>: 512GB</li>
                <li><b>Screen size</b>: 15.6 inches</li>
                <li><b>Backup</b>: 7 hours</li>
            </ul>
        </div>

        <div class="specs-card">
            <img src="/hp-laptop.jpg" class="laptop-image" alt="">

            <ul class="specs-list">
                <li><b>Laptop name</b>: HP</li>
                <li><b>Processor</b>: Intel Core i5</li>
                <li><b>Generation</b>: 10th</li>
                <li><b>RAM</b>: 16GB</li>
                <li><b>SSD</b>: 512GB</li>
                <li><b>Screen size</b>: 14.1 inches</li>
                <li><b>Backup</b>: 9 hours</li>
            </ul>
        </div>

        <div class="specs-card">
            <img src="/Lenovo laptop.webp" class="laptop-image" alt="">

            <ul class="specs-list">
                <li><b>Laptop name</b>: Lenovo</li>
                <li><b>Processor</b>: Intel Core i7</li>
                <li><b>Generation</b>: 10th</li>
                <li><b>RAM</b>: 32GB</li>
                <li><b>SSD</b>: 512GB</li>
                <li><b>Screen size</b>: 13.3 inches</li>
                <li><b>Backup</b>: 10 hours</li>
            </ul>
        </div>

        <div class="output">
            <img src="/Laptop.jpg" class="laptop-image" alt="">

            <div class="specs-list">
                <p><b>Laptop name</b>: <span id="output1"></span> </p>
                <p><b>Processor</b>: <span id="output2"></span> </p>
                <p><b>Generation</b>: <span id="output3"></span> </p>
                <p><b>RAM</b>: <span id="output4"></span> </p>
                <p><b>SSD</b>: <span id="output5"></span> </p>
                <p><b>Screensize</b>: <span id="output6"></span> </p>
                <p><b>Backup</b>: <span id="output7"></span> </p>
            </div>            
        </div>
    </section>

In order to style these cards, we will apply the following CSS:

.specs-container
{
    width: fit-content;
    height: 300px;
    margin: auto;
    padding: 10px;
    background-color: blue;
    display: flex;
    padding-top: 7.5px;
    gap: 10px;
}

.specs-card
{
    width: 250px;
    height: 285px;
    background-color: rgb(231, 231, 201);
    border-radius: 7px;

}

.laptop-image
{
    height: 140px;
    width: 250px;
    border-bottom: solid rgb(109, 216, 55);
    border-radius: 7px;
}

.specs-list
{
    padding: 5px;
}

.output
{
    width: 250px;
    height: 285px;
    background-color: rgb(253, 206, 220);
    border-radius: 7px;
}

Now after applying all these CSS styles, the cards should finally look like this:

Note: The laptop images displayed in the cards do not represent the real laptops with those specifications.

As you can see, the empty card is only having labels, and there are no specifications indicated — which is because we want the specifications to come from the user via the form we created. But in order to transmit the user inputs in the form to the empty card, we need JavaScript, and this leads us to the next step.

Step 3: Getting the form inputs (JavaScript)

Before the inputs of the form can be transmitted and displayed in the empty card, we need to write a function in JavaScript with the name we specified in the submit button's onclick function in HTML, that is, submitBtn().

<button class="btn" type="submit" onclick="submitBtn()">Submit</button>

Then we need to get the actual value of each input in the form using their selector (class name) and adding .value in JavaScript. Since we will be using the class name of each input, we have to use document.querySelector.

Here are the JavaScript codes to get the form input:

function submitBtn()
{
    var nameoflaptop = document.querySelector('.laptop-name').value;
    var processoroflaptop = document.querySelector('.laptop-processor').value;
    var genoflaptop = document.querySelector('.laptop-gen').value;
    var ramoflaptop = document.querySelector('.laptop-ram').value;
    var ssdoflaptop = document.querySelector('.laptop-ssd').value;
    var screenoflaptop = document.querySelector('.laptop-screensize').value;
    var backupoflaptop = document.querySelector('.laptop-backup').value;
}

With this, we can get the actual value of whatever specifications a user enters into the form for the laptop name, processor, generation, RAM, SSD, screen size, and backup. But when the user clicks the submit button, nothing is going to happen – all the inputs will remain on the form. This is because at the click of the submit button, the form inputs go nowhere since we haven’t specified where they should go.

Specifying where the form inputs should go is what we will treat in the next step.

Step 4: Adding the form inputs to the empty card (JavaScript)

To be able to transmit the form inputs to the empty card, we need to get the exact location of the specification that matches the form input using JavaScript. This means the output on the card must match the input from the form.

For us to get the actual value of each output in the empty card, we use their selector (id), and to do that, we have to use document.getElementbyId. To access the individual content in the card, we say .textcontent and to finally transmit each form input to the output, we equate the output to the corresponding input.

Here are the JavaScript codes to transmit the form inputs to the outputs in the empty card:

function submitBtn()
{
    var nameoflaptop = document.querySelector('.laptop-name').value;
    var processoroflaptop = document.querySelector('.laptop-processor').value;
    var genoflaptop = document.querySelector('.laptop-gen').value;
    var ramoflaptop = document.querySelector('.laptop-ram').value;
    var ssdoflaptop = document.querySelector('.laptop-ssd').value;
    var screenoflaptop = document.querySelector('.laptop-screensize').value;
    var backupoflaptop = document.querySelector('.laptop-backup').value;


    document.getElementById("output1").textContent = nameoflaptop;
    document.getElementById("output2").textContent = processoroflaptop;
    document.getElementById("output3").textContent = genoflaptop;
    document.getElementById("output4").textContent = ramoflaptop;
    document.getElementById("output5").textContent = ssdoflaptop;
    document.getElementById("output6").textContent = screenoflaptop;
    document.getElementById("output7").textContent = backupoflaptop;

}

Now with this, anything a user enters into each of the form inputs will go to the corresponding output on the card.

But there is a little problem here. The problem is that the webpage will automatically refresh itself at the click of the submit button, meaning that all the form inputs will show briefly on the card before the webpage gets refreshed.

By default, the submit button refreshes a webpage. But in order to prevent this from happening, we need to write a JavaScript code that prevents the submit button from refreshing the webpage, which will then allow the form inputs to be transmitted to the empty card.

const btn = document.querySelector('.btn');

btn.addEventListener('click', function handleClick(event)
{
    event.preventDefault();
    const inputtexts = document.querySelectorAll('.laptop-name, .laptop-processor, .laptop-gen, .laptop-ram');
    const input_texts = document.querySelectorAll('.laptop-ssd, .laptop-screensize, .laptop-backup');

    inputtexts.forEach(input => {
        input.value = '';
    });

    input_texts.forEach(input => {
        input.value = '';
    });
});

So, with this, the form inputs should be transmitted to the empty card without the webpage being refreshed automatically.

As you can see from the second screenshot, all the input fields in the form got cleared after the submit button was clicked and the inputs transmitted to the empty card. This is because in the code above, the following was specified:

inputtexts.forEach(input => {
        input.value = '';
    });

    input_texts.forEach(input => {
        input.value = '';
    });

What this code does is to return each of the input fields in the form to null after the submit button is clicked.

Below are the code implementations for this project on my CodePen.

Note: The laptop image for each card is not showing due to issues with uploading images on Codepen.

Conclusion
In this technical article, we have been able to learn about how to add user inputs from a form to a card using JavaScript. The steps taken to achieve this are pretty straightforward, and it is easy to implement on a webpage. The card that was used here to display the form inputs is the example I chose; actually, you can transmit the inputs from a form to any part of your webpage. So if you are looking to build a website with a form that accepts inputs and transmit it to a card (or somewhere on your webpage), you won’t go wrong following the steps above.

How to Create Multi-category To-do Lists Using JavaScript

Oluwaseun Lawal — Fri, 19 May 2023 03:36:52 +0000

Article Objective

At the end of this technical article, first, the reader will learn how to create multiple categories of to-do lists with a delete (‘X’) button. Secondly, the reader will learn how to get the inputs to show in each to-do list. Then finally, the reader will learn how to use the delete (‘X’) button to delete an individual to-do list.

Article outline

Introduction
Step 1: Creating a simple heading and adding background image (HTML & CSS)
Step 2: Creating a section that will contain the to-do lists (HTML)
Step 3: Styling the section and each of the to-do lists (CSS)
Step 4: Declaring all the variables (JavaScript)
Step 5: Getting user inputs to display in each to-do list category (JavaScript)
Step 6: Activating the delete button and adding a prompt to it (JavaScript)
Conclusion

Introduction

A to-do list is simply a written list of tasks or errands that one needs or intends to carry out over a given time or in a certain place. Generally speaking, we humans are prone to forgetfulness, especially when we have a lot of things to do day in, day out—which is where a to-do list can really help us. A to-do list is a productivity tool that can help us to list out tasks we intend to accomplish and then cross-check to see if we’ve accomplished them. It also serves as a memory aid to help us remember what we need to do at a given time or even place.

In this article, we are going to create multi-category to-do lists with JavaScript, whose user interface will be designed using plain HTML and CSS. These multi-category to-do lists are going to contain a to-do list for home, a to-do list for the workplace, and a to-do list for the grocery store. Each of these to-do lists is going to work independently of each other; that is, what the user enters into any of the categories won’t show in the other categories. With this, a user can enter a specific to-do in each of the to-do list categories.

Let us get started creating these multi-category to-do lists.

Step 1: Creating a simple heading and adding background image (HTML & CSS)

The first thing we have to do is to open up our code editor (VS Code used here) and create three separate files and then link the CSS and JS files in the HTML.

<!DOCTYPE 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>Multi-category To-do Lists</title>

    <link rel="stylesheet" href="/style.css">

    <script defer src="/main.js"></script>
</head>

Then we can proceed to create a simple heading indicating what we are doing.

<body>

    <h3 class="heading">Multi-category To-do Lists</h3>

</body>

Let's add some CSS styling:

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.heading
{
    width: 100vw;
    text-align: center;
    font-size: 24px;
    background-color: #fa8072;
    color: white;
    height: 30px;
}

After applying these styles, it should now look like this:

Let’s proceed to set a background colour in the body of our to-do lists project.

body
{
    background-color: #1f1f39;
}

Step 2: Creating a section that will contain the to-do lists (HTML)

Here, we are going to create a section that is going to contain three categories of to-do lists, which are to-do list for home, to-do list for workplace, and to-do list for grocery store.

We are going to create three containers inside this section, and these containers are going to have the following class names: home, workplace, and grocery store.

Inside each of these containers, we are going to have a heading (to indicate the different to-do lists), input (for text), a button (add), and an empty unordered list in which each entered to-do list will be stored. In order to style them, we are going to give all of the aforementioned a class name.

<section>
        <div class="home">
            <h5>To-do list for Home</h5>
            <input type="text" placeholder=" Enter your to-do" class="textfield1">
            <p class="error-msg" style="display: none; color: white">Enter a to-do in the input field to start a list</p>
            <button class="btn1" id="btn1">Add</button>

            <ul class="tdlist1">
                <!-- <li class="list">Make some sandwiches<button class="deletebtn1" >X</button></li> -->
            </ul>
        </div>

        <div class="workplace">
            <h5>To-do list for Workplace</h5>
            <input type="text" placeholder=" Enter your to-do" class="textfield2">
            <p class="error_msg" style="display: none; color: white">Enter a to-do in the input field to start a list</p>
            <button class="btn2" id="btn2">Add</button>

            <ul class="tdlist2">
                <!-- <li class="list">Submit a report to boss<button class="deletebtn2" >X</button></li> -->
            </ul>
        </div>

        <div class="grocerystore">
            <h5>To-do list for Grocery Store</h5>
            <input type="text" placeholder=" Enter your to-do" class="textfield3">
            <p class="errorMsg" style="display: none; color: white">Enter a to-do in the input field to start a list</p>
            <button class="btn3" id="btn3">Add</button>

            <ul class="tdlist3">
                <!-- <li class="list">Buy some fresh apples<button class="deletebtn3" >X</button></li> -->
            </ul>
        </div>
    </section>

As you can see, the unordered list in each of the to-do list containers has a list that contains a to-do entry and a button (to delete an entry) but which have all been commented out. There are two reasons for doing this. The first reason is because we want the to-do list entry to come from a user. Secondly, it is only to show the selectors (class names) given to the list and the button, which we are going to make use of in CSS and JavaScript.

Step 3: Styling the section and each of the to-do lists (CSS)

The section is the first thing we start with, and the major styling includes width: 90%; margin: auto; display: grid; and grid-template-columns; which makes the to-do lists responsive. Then we style the elements inside the first to-do list container and then style the heading—making the font bigger and giving it a standout color. Thereafter, we style the input field and the add button to make them eye-pleasing. Finally, we style the empty unordered list and also style the appearance of the list so that each to-do list entry will have that same appearance.

section
{
    max-width: 1200px;
    height: fit-content;
    margin: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 50px;
    margin-top: 100px;
}

.home
{
    width: 350px;
    height: fit-content;
    border: 2px groove;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 5px 5px #fa8072;
}

h5
{
    font-size: 20px;
    padding-top: 5px;
    padding-bottom: 10px;
    color: rgb(16, 255, 8);
}

.textfield1
{
    width: 250px;
    height: 30px;
    border-radius: 5px;
}

.btn1
{
    width: 50px;
    height: 30px;
    background-color: aqua;
    font-weight: bolder;
    border-radius: 5px;
}

.tdlist1
{
    width: 50%;
    padding: 10px;
    color: aliceblue;
}

.list
{
    background: linear-gradient(to left, #4221fa, #4b4f8f);
    margin: 10px;
    padding: 5px;
    border-left: solid 4px rgb(21, 255, 0);
    font-size: 18px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    width: 305px;
    text-align: left;
}

.deletebtn1
{
    color: red;
    width: 20px;
    font-size: 20px;
    background: transparent;
    border: 0;
}

For the other two categories of to-do lists to have the same appearance as the first, we are going to apply the same styling to them. Though we are making use of the same styling, for the sake of easy differentiation, we need to add a figure to the selectors (i.e., class names) used. The list class inside the empty unordered list is the only class name that we are not going to repeat and which is going to be used for the three categories of to-do lists.

Styling for the second to-do list category:

.workplace
{
    width: 350px;
    height: fit-content;
    border: 2px groove;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 5px 5px #fa8072;
}

.textfield2
{
    width: 250px;
    height: 30px;
    border-radius: 5px;
}

.btn2
{
    width: 50px;
    height: 30px;
    background-color: aqua;
    font-weight: bolder;
    border-radius: 5px;
}

.tdlist2
{

    width: 50%;
    padding: 10px;
    color: aliceblue;

}

.deletebtn2
{
    color: red;
    width: 20px;
    font-size: 20px;
    background: transparent;
    border: 0;
}

Styling for the third to-do list category:

.grocerystore
{
    width: 350px;
    height: fit-content;
    border: 2px groove;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 5px 5px #fa8072;
}

.textfield3
{
    width: 250px;
    height: 30px;
    border-radius: 5px;
}

.btn3
{
    width: 50px;
    height: 30px;
    background-color: aqua;
    font-weight: bolder;
    border-radius: 5px;
}

.tdlist3
{

    width: 50%;
    padding: 10px;
    color: aliceblue;

}

.deletebtn3
{
    color: red;
    width: 20px;
    font-size: 20px;
    background: transparent;
    border: 0;
}

@media (max-width: 1280px) {
    .home {
        margin: auto;
    }

    .workplace {
        margin: auto;
    }

    .grocerystore {
        margin: auto;
    }
}

After applying all of these styles, we are going to have multi-category to-do lists that look like the following. This is a mobile (tablet) view.

Step 4: Declaring all the variables (JavaScript)

We are done with designing the interface of our multi-category to-do lists, but they won’t work without JavaScript. So, the first thing we have to do is declare all the variables (that point to the selectors) in JavaScript.

const listItems1 = document.querySelector('.tdlist1')
const input1 = document.querySelector('.textfield1')
const btn1 = document.querySelector('.btn1')

const listItems2 = document.querySelector('.tdlist2')
const input2 = document.querySelector('.textfield2')
const btn2 = document.querySelector('.btn2')

const listItems3 = document.querySelector('.tdlist3')
const input3 = document.querySelector('.textfield3')
const btn3 = document.querySelector('.btn3')

With this, we can have access to the input field, the add button, and the empty unordered list all inside their respective HTML containers.

Step 5: Getting user inputs to display in each to-do list category (JavaScript)

Now that we have declared all the variables, we need to get the user's input (i.e., to-do entry) to display in each to-do list category. Here is what we need to do in JavaScript:

btn1.addEventListener('click', function() {
    var text = input1.value.trim()

    if (text === '') {
        document.querySelector('.error-msg').style.display = 'block'
    } else {
        document.querySelector('.error-msg').style.display = 'none'
        var li = document.createElement('li')
        li.classList.add('list')
        li.textContent = text
        console.log(input1)
    }

    var xbtn = document.createElement('button')

    xbtn.classList.add('deletebtn1')
    xbtn.textContent = 'X'
    li.appendChild(xbtn)
    listItems1.appendChild(li)
    console.log(listItems1)  
    input1.value = ''
});

input1.addEventListener('input', function() {
    if (input1.value.trim() !== '') {
        document.querySelector('.error-msg').style.display = 'none'
    }
});

Since we want each to-do list category to work independently, we have to copy the same lines of code for the other two to-do list categories, but we have to differentiate their variables, i.e., btn2, deletebtn2, btn3, deletebtn3, etc.

btn2.addEventListener('click', function() {
    var text = input2.value.trim()

    if (text === '') {
        document.querySelector('.error_msg').style.display = 'block'
    } else {
        document.querySelector('.error_msg').style.display = 'none'
        var li = document.createElement('li')
        li.classList.add('list')
        li.textContent = text
        console.log(input2)
    }

    var xbtn = document.createElement('button')

    xbtn.classList.add('deletebtn2')
    xbtn.textContent = 'X'
    li.appendChild(xbtn)
    listItems2.appendChild(li)
    console.log(listItems2)  
    input2.value = ''
});

input2.addEventListener('input', function() {
    if (input2.value.trim() !== '') {
        document.querySelector('.error_msg').style.display = 'none'
    }
});


btn3.addEventListener('click', function() {
    var text = input3.value.trim()

    if (text === '') {
        document.querySelector('.errorMsg').style.display = 'block'
    } else {
        document.querySelector('.errorMsg').style.display = 'none'
        var li = document.createElement('li')
        li.classList.add('list')
        li.textContent = text
        console.log(input3)
    }

    var xbtn = document.createElement('button')

    xbtn.classList.add('deletebtn3')
    xbtn.textContent = 'X'
    li.appendChild(xbtn)
    listItems3.appendChild(li)
    console.log(listItems3)  
    input3.value = ''
});

input3.addEventListener('input', function() {
    if (input3.value.trim() !== '') {
        document.querySelector('.errorMsg').style.display = 'none'
    }
});

After these JavaScript code snippets are implemented, our multi-category to-do lists work, and any to-do a user enters for one category will only appear there (unless the user types the same to-do in another category).

So, this is how it is going to look:

As you can see from here, each to-do list works independently and doesn’t interfere with the others. The next thing we want to do is to activate the delete button and add a prompt to it.

Step 6: Activating the delete button and adding a prompt to it (JavaScript)

Now that our tri-category to-do lists are working, we want to activate the delete button so that a user will be able to delete any to-do entry that has been accomplished. We want to also add a prompt to ask the user if they are sure of deleting a to-do entry.

Here is what we need to do in JavaScript:

listItems1.addEventListener('click', function(e)
{
    if(e.target.classList.contains('deletebtn1'))
    {
        if(confirm("Are you sure you want to delete this to-do?"))
        {
        var li = e.target.parentElement
        listItems1.removeChild(li)
        }
    }

});

listItems2.addEventListener('click', function(e)
{
    if(e.target.classList.contains('deletebtn2'))
    {
        if(confirm("Are you sure you want to delete this to-do?"))
        {
        var li = e.target.parentElement
        listItems2.removeChild(li)
        }
    }

});

listItems3.addEventListener('click', function(e)
{
    if(e.target.classList.contains('deletebtn3'))
    {
        if(confirm("Are you sure you want to delete this to-do?"))
        {
        var li = e.target.parentElement
        listItems3.removeChild(li)
        }
    }
});

So, we are going to insert these lines of code under the JavaScript code for each to-do list category as laid out in Step 5. After this is done, it will now be possible to delete any to-do entry in each of the to-do list categories.

We then need to enter to-dos again because the added JavaScript codes for the prompt automatically refresh the page.

The delete button on the first to-do entry was clicked on, and it displayed the prompt shown in the snapshot. After clicking OK, the first to-do entry (grill chicken for breakfast) in the to-do list for home is deleted, and we have the result below.

Below is all the code implementation for this project in my Codepen.

Conclusion
In this article, we focused on creating multi-category to-do lists that can be useful for managing to-dos for the home, the workplace, and the grocery store. The interface of the to-do lists was designed with plain HTML and CSS, and functionality was added to them using JavaScript. This project was developed for web development beginners who are looking for beginner-friendly web projects to learn JavaScript.