Code from the video:
Code.gs
// =================== GOOGLE SHEET ========================
function addRecord(schoolId, name, address, bday, course){
try{
var spreadSheet =SpreadsheetApp.openById("1CdIPDw67KdKHFRWW9M6-tIwfKz_M40as-8p4N2cM-zE");
var sheet = spreadSheet.getSheetByName("Sheet1");
sheet.appendRow([schoolId, name, address, bday, course]);
return 1;
}catch(error){
return error;
}
}
function getStudents(){
try{
var spreadSheet =SpreadsheetApp.openById("1CdIPDw67KdKHFRWW9M6-tIwfKz_M40as-8p4N2cM-zE");
var sheet = spreadSheet.getSheetByName("Sheet1");
var range = sheet.getDataRange();
var values = range.getValues();
return JSON.stringify(values);
}catch(error){
return error;
}
}
Sheet.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function submit(){
const schoolId = document.getElementById("schoolId").value;
const name = document.getElementById("name").value;
const address = document.getElementById("address").value;
const bday = document.getElementById("bday").value;
const course = document.getElementById("course").value;
google.script.run.withSuccessHandler(
function(response){
if(response == 1){
alert("Records has been successfully added!");
updateDisplay();
}else{
console.log(response)
alert("Record not saved " + response);
}
}
).addRecord(schoolId, name, address, bday, course);
}
function updateDisplay(){
var tableBody = document.getElementById("tableBody");
tableBody.innerHTML = "";
var myHtml = "";
google.script.run.withSuccessHandler(
function(students){
if(students){
students = JSON.parse(students);
for(i=1;i<students.length;i++){
var row = document.createElement("tr");
row.innerHTML = `
<td style="border:1px solid black; padding: 5px;">${students[i][0]}</td>
<td style="border:1px solid black; padding: 5px;">${students[i][1]}</td>
<td style="border:1px solid black; padding: 5px;">${students[i][2]}</td>
<td style="border:1px solid black; padding: 5px;">${formatDate(students[i][3])}</td>
<td style="border:1px solid black; padding: 5px;">${students[i][4]}</td>
`;
tableBody.appendChild(row);
}
}else{
alert("NO STUDENTS FOUND!")
}
}
).getStudents();
}
function formatDate(dateString){
var date = new Date(dateString);
var formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
return formatter.format(date); // Example: Dec 4, 2011
}
document.addEventListener("DOMContentLoaded",
function(){
updateDisplay();
}
);
</script>
</head>
<body>
<h1>GOOGLE SHEETS CRUD SERIES</h1>
<h1>ADD STUDENTS</h1>
<input type="text" id="schoolId" placeholder="Enter School ID"/><br/>
<input type="text" id="name" placeholder="Enter NAME"/><br/>
<input type="text" id="address" placeholder="Enter ADDRESS"/><br/>
<input type="text" id="bday" placeholder="Enter BIRTHDAY"/><br/>
<input type="text" id="course" placeholder="Enter COURSE"/><br/>
<button onclick="submit()">Submit</button>
<br/><br/>
<h1>RETRIEVE STUDENTS</h1>
<table style="border:1px solid black; border-collapse:collapse;">
<thead>
<tr>
<th style="border:1px solid black; padding: 5px;">SCHOOL ID</th>
<th style="border:1px solid black; padding: 5px;">NAME</th>
<th style="border:1px solid black; padding: 5px;">ADDRESS</th>
<th style="border:1px solid black; padding: 5px;">BIRTHDAY</th>
<th style="border:1px solid black; padding: 5px;">COURSE</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment