Code used in the video:
Code.gs
function doGet(e) {
var page = e.parameter.page || "index";
switch(page){
case "about":
return HtmlService.createHtmlOutputFromFile("About");
case "contact":
return HtmlService.createHtmlOutputFromFile("ContactUs");
default:
return HtmlService.createHtmlOutputFromFile("Index");
}
}
function getScriptUrl(){
return ScriptApp.getService().getUrl();
}
function getGreetings(){
return "Greetings from the server!";
}
function sendEmail(){
var recepient = "adormie@outlook.com";
var mySubject = "This is the subject";
var myBody = "This is the body of the email. It is a test from Google Apps Script";
try{
MailApp.sendEmail(
{
to: recepient,
subject: mySubject,
body:myBody
}
);
return "Email sent Successfully!";
}catch(err){
return `Something went wrong! ${err}`;
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script>
function buttonClicked(){
google.script.run.withSuccessHandler(function(response){
var msgDiv = document.getElementById("messageDiv");
msgDiv.innerText = response;
}).getGreetings();
}
function updateLinks(linksList){
google.script.run.withSuccessHandler(
function(url){
linksList.forEach(function(link){
document.getElementById(link.id).href = `${url}?page=${link.param}`;
})
}
).getScriptUrl();
}
document.addEventListener("DOMContentLoaded",
function(){
const links = [
{id:"aboutLink", param:"about"},
{id:"contactLink", param:"contact"}
]
updateLinks(links);
}
);
</script>
</head>
<body>
<img src="https://drive.google.com/thumbnail?id=1WkCDv7FBdfXffLmHQNOoP7C5hu5IVehS" alt="my image from google drive"/>
<img src="https://imagizer.imageshack.com/v2/640x480q70/922/zzcOPK.jpg" alt="My Bike" width="300" height="200"/>
<h1>HELLO GOOGLE APPS SCRIPT WEB APPS!</h1>
<h1>Please be good to me...</h1>
<h2>Hello World!</h2>
<button class="btn btn-primary" onclick="buttonClicked()">Click Me</button>
<div id="messageDiv"></div>
<a href="#" id="aboutLink">About</a>
<a href="#" id="contactLink">Contact Us</a>
</body>
</html>
About.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>ABOUT PAGE</h1>
</body>
</html>
ContactUs.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>CONTACT US</h1>
</body>
</html>
