VIDEO
HTML, CSS, JavaScript code for Crud App Using Google Sheet as a Database
<!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>
.edit,.delete{
background-color:red;
cursor: pointer;
color:white;
padding: 3px;
border-radius:5px;
}
.update{
display: none;
}
</style>
</head>
<body>
<form>
<input type="text"class="todo"placeholder='Todo..'>
<button class="add"type="button" onclick="addData()">Add Todo</button>
<button class="update"type="button">Update Todo</button>
</form>
<table>
<thead>
<tr>
<th>Id</th>
<th>Todo</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
let api = "YOUR_API_URL_HERE";
let form = document.querySelector("form");
let add = document.querySelector(".add");
let update = document.querySelector(".update");
let tbody = document.querySelector("tbody");
function addData() {
add.textContent="Adding.."
let obj = {
todo:form[0].value
}
fetch(api,{
method:"POST",
body:JSON.stringify(obj)
})
.then(res => res.text())
.then(data => {
readData()
alert(data)
add.textContent="Add Todo"
form.reset();
});
}
function readData(){
fetch(api)
.then(res=>res.json())
.then(data=>{
let todo = data.todo;
let trtd = todo.map(each=>{
return `
<tr>
<td class="id">${each[0]}</td>
<td class="data">${each[1]}</td>
<td class="edit"onclick="updateCall(this,${each[0]})">Edit</td>
<td class="delete"onclick="delData(${each[0]})">Delete</td>
</tr>
`
})
tbody.innerHTML=trtd.join("");
})
}
readData()
function delData(id){
fetch(api+`?del=true&id=${id}`)
.then(res=>res.text())
.then(data=>{
readData()
alert(data)
})
}
function updateCall(elm,id){
add.style.display="none"
update.style.display="unset"
let todo = elm.parentElement.querySelector(".data").textContent;
form[0].value=todo;
update.setAttribute("onclick",`updateData(${id})`)
}
function updateData(id){
update.textContent="Updating.."
fetch(api+`?update=true&id=${id}&data=${form[0].value}`)
.then(res=>res.text())
.then(data=>{
readData()
alert(data)
form.reset()
update.textContent="Update Todo"
add.style.display="unset"
update.style.display="none"
})
}
</script>
</body>
</html>
Appscript Code For CRUD APP using Google Sheet as a Database
const app = SpreadsheetApp.openByUrl("Your_Spreadsheet_url_here");
const sheet = app.getSheetByName("Sheet1");
function doGet(req){
if(req.parameter.del){
sheet.deleteRow(req.parameter.id)
return ContentService.createTextOutput("Data Deleted!")
}else if(req.parameter.update){
sheet.getRange(req.parameter.id,2).setValue(req.parameter.data);
return ContentService.createTextOutput("Data Updated!")
}else{
let data = sheet.getDataRange().getValues();
data.shift()
let obj = {
todo:data
}
return ContentService.createTextOutput(JSON.stringify(obj))
}
}
function doPost(req){
let data = JSON.parse(req.postData.contents)
sheet.appendRow(["=row()",data.todo])
return ContentService.createTextOutput("Data Received!")
}
function test(){
Logger.log(sheet.getDataRange().getValues())
}
