JavaScript CRUD Application With Local Storage - HTML5 CSS3 & JAVASCRIPT | Devhubspot

App CSS Html javascript

Hello Friends, in this video I will teach you how to create crud application with local storage, JavaScript CRUD, Local storage JavaScript, JavaScript database tutorial, JavaScript web app development, JavaScript local storage tutorial, CRUD operations in JavaScript, Building a CRUD app with JavaScript, JavaScript offline application, JavaScript client-side storage, JavaScript application with local database

Steps For Creating CRUD Application

To create a To-Do using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the To-Do.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <title>CRUD Application Javascript | Html | Css</title>
        <link rel="stylesheet" href="./style.css" />

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <h2 class="mt-5 mb-5">CRUD Application with local Storage</h2>
            <div class="mb-5">
                <div class="row">
                    <div class="form-group col-md-6 mb-3">
                        <label for="name">Name</label>
                        <input type="text" name="name" class="form-control" id="name" placeholder="Enter Name" />
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <label for="email">Email</label>
                        <input type="text" name="email" class="form-control" id="email" placeholder="Enter Email" />
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <label for="age">Age</label>
                        <input type="number" name="age" class="form-control" id="age" placeholder="Enter Age" />
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <label for="address">Address</label>
                        <input type="text" name="address" class="form-control" id="address" placeholder="Enter Address" />
                    </div>
                    <div class="col-lg-12 mt-2">
                        <button class="btn btn-success" id="submit" onclick="AddData()">
                            Add Data
                        </button>

                        <button class="btn btn-primary" id="update" onclick="AddData()">
                           Update
                        </button>
                    </div>
                </div>
            </div>

            <hr>
            <div class="row mt-5">
                <div class="col-12">
                    <table class="table table-bordered" id="crudtable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Age</th>
                                <th>Address</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
       

        <script src="./script.js"></script>
    </body>
</html>

Next, add the following CSS codes to your style.css file to style the captcha generator and make it interactive and beautiful.

#update{
    display: none;
}

Finally, add the following JavaScript code to your script.js file to make the to dynamic list and delete or manage locally

function validationForm() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var age = document.getElementById("age").value;
    var address = document.getElementById("address").value;

    if (!name) {
        alert("Name is required!");
        return false;
    }
    if (!email) {
        alert("Email is required!");
        return false;
    }
    if (!age) {
        alert("Age is required!");
        return false;
    }
    if (!address) {
        alert("Address is required!");
        return false;
    }
    return true;
}

function showData() {
    var userList;
    if (localStorage.getItem('userList') == null) {
        userList = [];
    } else {
        userList = JSON.parse(localStorage.getItem('userList'));
    }

    var html = "";

    userList.forEach((element, index) => {
        html += "<tr>";
        html += "<td>" + element.name + "</td>";
        html += "<td>" + element.email + "</td>";
        html += "<td>" + element.age + "</td>";
        html += "<td>" + element.address + "</td>";
        html += `<td> 
        <button class="btn btn-danger" onclick="deleteData(${index})">
            Delete
        </button>
        <button class="btn btn-warning m-2" onclick="updateData(${index})">
            Edit
        </button>
        
        </td>`;
        html += "</tr>";

    });

    document.querySelector("#crudtable tbody").innerHTML = html;
}

document.onload = showData();

function AddData() {
    if (validationForm() == true) {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var age = document.getElementById("age").value;
        var address = document.getElementById("address").value;
        var userList;
        if (localStorage.getItem('userList') == null) {
            userList = [];
        } else {
            userList = JSON.parse(localStorage.getItem('userList'));
        }

        userList.push({
            name: name,
            email: email,
            age: age,
            address: address,
        });

        localStorage.setItem('userList', JSON.stringify(userList))
        showData();

        document.getElementById("name").value = "";
        document.getElementById("email").value = "";
        document.getElementById("age").value = "";
        document.getElementById("address").value = "";
    }

}

function deleteData(index) {
    var userList;
    if (localStorage.getItem('userList') == null) {
        userList = [];
    } else {
        userList = JSON.parse(localStorage.getItem('userList'));
    }
    userList.splice(index, 1);

    localStorage.setItem('userList', JSON.stringify(userList))
    showData();

}

function updateData(index) {
    document.getElementById("submit").style.display = 'none';
    document.getElementById("update").style.display = 'block';

    var userList;
    if (localStorage.getItem('userList') == null) {
        userList = [];
    } else {
        userList = JSON.parse(localStorage.getItem('userList'));
    }

    document.getElementById("name").value = userList[index].name;
    document.getElementById("email").value = userList[index].email;
    document.getElementById("age").value = userList[index].age;
    document.getElementById("address").value = userList[index].address;


    document.querySelector("#update").onclick = function () {
        userList[index].name = document.getElementById("name").value;
        userList[index].email = document.getElementById("email").value;
        userList[index].age = document.getElementById("age").value;
        userList[index].address = document.getElementById("address").value;

        localStorage.setItem('userList', JSON.stringify(userList))
        showData();

        document.getElementById("submit").style.display = 'block';
        document.getElementById("update").style.display = 'none';
        document.getElementById("name").value = "";
        document.getElementById("email").value = "";
        document.getElementById("age").value = "";
        document.getElementById("address").value = "";
    }
}

Conclusion

With HTML, CSS, and JavaScript, I am to show you how to create your JavaScript CRUD Application With Local Storage. You may modify your generator to suit your demands because the coding procedure is straightforward and simple to grasp.