Code used in the video:
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" >
<?!= include("Styles") ?>
<?!= include("Scripts") ?>
</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 class="pula">HELLO GOOGLE APPS SCRIPT WEB APPS!</h1>
<h1 class="berde">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>
<button class="btn btn-primary" onclick="openModal()">Send Email</button>
<?!= include("Modal"); ?>
</body>
</html>
Scripts.html
<script>
function openModal(){
const myModal = new bootstrap.Modal(document.getElementById('emailModal'), {
keyboard: false,
backdrop:"static"
});
myModal.show();
}
function sendMail(){
const recepient = document.getElementById("to").value;
const subject = document.getElementById("body").value;
const body = document.getElementById("subject").value;
google.script.run.withSuccessHandler(
function(response){
document.getElementById("messageDiv").innerText = response;
}
).sendEmail(recepient, subject, body);
}
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>
Modal.html
<!-- MODAL -->
<div class="modal fade" id="emailModal" role="modal" >
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-white" style="background-color:#006400">
<h5 class="modal-title" id="modalTitle">Send Email</h5>
<button type="button" class="btn-close btn-primary" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modalBody">
<div class="row m-1">
<input type="text" class="form-control" placeholder="example@myemail.com" id="to"/>
</div>
<div class="row m-1">
<input type="text" class="form-control" placeholder="Subject" id="subject"/>
</div>
<div class="row m-1">
<textarea placeholder="Body" id="body" rows="5"class="form-control" /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="btnSendMail" class="btn btn-primary" onclick='sendMail()'>Send</button>
</div>
</div>
</div>
</div>
Code.gs
function doGet(e) {
var page = e.parameter.page || "index";
switch(page){
case "about":
// return HtmlService.createHtmlOutputFromFile("About");
var template = HtmlService.createTemplateFromFile("About");
template.username = "Bea Ysabel";
return template.evaluate();
case "contact":
return HtmlService.createHtmlOutputFromFile("ContactUs");
default:
//return HtmlService.createHtmlOutputFromFile("Index");
return HtmlService.createTemplateFromFile("Index").evaluate();
}
}
function getScriptUrl(){
return ScriptApp.getService().getUrl();
}
function getGreetings(){
return "Greetings from the server!";
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function sendEmail(emailRecepient, emailSubject, emailBody){
try{
MailApp.sendEmail(
{
to: emailRecepient,
subject: emailSubject,
body: emailBody
}
);
return "Email sent Successfully!";
}catch(err){
return `Something went wrong! ${err}`;
}
}
No comments:
Post a Comment