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

Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script

Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script

In today's video you will learn about How to read and display data from Google Sheet.

AppsScript Code


const ss = SpreadsheetApp.openByUrl("Your google sheet url")
const sheet = ss.getSheetByName("Sheet1")
function doGet(e){
  let obj = {};
  let data = sheet.getDataRange().getValues()
  obj.content = data;
return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON)

}

Deploy your appsscript project and copy the API endpoint URL.

HTML, JavaScript Code


<!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>Document</title>
    <style>
        tr {
            background-color: lightGrey;
        }
        
        tr:nth-child(2n) {
            background-color: grey;
        }
    </style>
</head>

<body>
    <table></table>
    <script>
        fetch('paste your api end point url here')
            .then(res => res.json())
            .then(data => {
                let tr = data.content.reduce((prev, cur) => {
                    let td = cur.map(e => `<td>${e}</td>`)
                    return prev + `<tr>${td.join("")}</tr>`
                }, "\r")
                document.querySelector("table").innerHTML = tr;
                
            });
    </script>
</body>

</html>

Keywords :

dynamically display data from google sheets into a web app
spreadsheet to html table
google html page
google apps script html table
spreadsheet in html
google apps script html css
google sheet to website free
google apps script html form submit
how to connect html form to google sheets
get data from google sheets to html
how to create a google page in html
google sheet page setup
how to create google search page in html

Useful Links

Subscribe to: Posts (Atom)