CRUD App Using HTML - CSS - JavaScript and IndexedDB API

CRUD App Using HTML - CSS - JavaScript and IndexedDB API

Hello, in today's video i will be showing you how to create simple CRUD App using HTML, CSS, and JavaScript.

HTML, CSS code

Save below html , css code in index.html file.


<!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>CRUD App</title>
    <style>
        form {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        form * {
            width: 50%;
            margin-top: 2px;
        }
        
        .update {
            display: none;
        }
        
        .up,
        .de {
            background-color: red;
            color: white;
            cursor: pointer;
        }
        
        td,
        th {
            border: 2px solid black;
        }
        
        h1 {
            text-align: center;
        }
        
        table {
            width: 100%;
        }
    </style>
</head>

<body>
    <h1>CRUD-APP</h1>
    <form>
        <input type="text" placeholder='Name'>
        <input type="email" placeholder='Email'>
        <input type="tel" placeholder='Phone'>
        <input type="text" placeholder='Address'>
        <button type="button" class="submit">Submit Data</button>
        <button type="button" class="update">Update Data</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Address</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script src="./script.js"></script>
</body>

</html>

JavaScript Code

Save below code in script.js file.


const form = document.querySelector("form");
const submit = document.querySelector(".submit");
const updates = document.querySelector(".update");
const tbody = document.querySelector("table>tbody");

submit.addEventListener('click', () => {
    let idb = indexedDB.open('crud', 1)
    idb.onupgradeneeded = () => {
        let res = idb.result;
        res.createObjectStore('data', { autoIncrement: true })
    }
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readwrite')
        let store = tx.objectStore('data')
        store.put({
            name: form[0].value,
            email: form[1].value,
            phone: form[2].value,
            address: form[3].value
        })
        alert("data has been added")
        location.reload()
    }
})

function read() {
    let idb = indexedDB.open('crud', 1)
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readonly')
        let store = tx.objectStore('data')
        let cursor = store.openCursor()
        cursor.onsuccess = () => {
            let curRes = cursor.result;
            if (curRes) {
                console.log(curRes.value.name);
                tbody.innerHTML += `
                
                ${curRes.value.name}
                ${curRes.value.email}
                ${curRes.value.phone}
                ${curRes.value.address}
                Update
                Delete
                
                `;
                curRes.continue()
            }

        }
    }
}

function del(e) {
    let idb = indexedDB.open('crud', 1)
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readwrite')
        let store = tx.objectStore('data')
        store.delete(e)
        alert("Data has been deleted")
        location.reload()
    }
}
let updateKey;

function update(e) {
    submit.style.display = "none";
    updates.style.display = "block";
    updateKey = e;
}
updates.addEventListener('click', () => {
    let idb = indexedDB.open('crud', 1)
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readwrite')
        let store = tx.objectStore('data')
        store.put({
            name: form[0].value,
            email: form[1].value,
            phone: form[2].value,
            address: form[3].value
        }, updateKey);
        alert("data has been updated")
        location.reload()
    }
})

read()

Useful Links

css html indexeddb javascript