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()
- Convert HTML CSS to PDF with JavaScript | HTML to PDF
- Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email
- CRUD App Using HTML - CSS - JavaScript and IndexedDB API
- Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script
- How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript
- Fetch and Read Excel Sheets Data in HTML Table with JavaScript
- JavaScript Todo List App with Local Storage | Todo App | Javascript Project
- Fetch and Display Multiple CSV Files in HTML Table with JavaScript | CSV to HTML | Read CSV
- Create a Math Quiz App using HTML CSS and JavaScript | JS Quiz App | JavaScript Project
- Speech to Text with JavaScript | Speech to Text App | JS
- Create a Text to Speech App with JavaScript | JS
- Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS
- Validate and show Preview of Single or Multiple Image before upload in server with Javascript | Js
- Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas | javascript | js
- Match Media Queries With JavaScript matchMedia Method
- Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader
- How to read csv data in html table using Javascript ( JS )
