Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file?
<script>
//google.script.run.updateColors();
document.querySelectorAll("input[type='number'], input[type='range']").forEach(doStuff);
function doStuff(){
google.script.run.withSuccessHandler( {
this.addEventListener("input", function() {
if (this.type === "range") {
this.nextElementSibling.value = this.value;
} else if (this.type === "number") {
this.previousElementSibling.value = this.value;
}
}
}).updateColors();
}
function updateColors() {
google.script.run.withSuccessHandler({
const colorFront = [
document.querySelector("#color-1-r").value,
document.querySelector("#color-1-g").value,
document.querySelector("#color-1-b").value
];
const colorBack = [
document.querySelector("#color-2-r").value,
document.querySelector("#color-2-g").value,
document.querySelector("#color-2-b").value
];
} ).updateDemoColors(colorFront, colorBack).updateBoxesColors(colorFront, colorBack).updateHex(colorFront,colorBack);
}
function updateHex(colorFront, colorBack) {
google.script.run.withSuccessHandler( {
const colorFrontHex = colorFront.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
const colorBackHex = colorBack.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
document.querySelector("#color-1-hex").value = `#${colorFrontHex.join('')}`;
document.querySelector("#color-2-hex").value = `#${colorBackHex.join('')}`
});
}
function updateBoxesColors(colorFront, colorBack) {
google.script.run.withSuccessHandler(ratio => {
const ratio = contrast(colorFront, colorBack);
document.querySelector("#aa-normal").className = ratio < 0.22222 ? "" : "fail";
document.querySelector("#aa-large").className = ratio < 0.33333 ? "" : "fail";
document.querySelector("#aaa-normal").className = ratio < 0.14285 ? "" : "fail";
document.querySelector("#aaa-large").className = ratio < 0.22222 ? "" : "fail";
const totalWrong = document.querySelectorAll(".fail").length;
let mouth = document.querySelector("#mouth");
let smile = document.querySelector("#smile");
switch(totalWrong) {
case 0:
mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,12...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<section id="color-contrast">
<h1>Google Color Contrast Checker</h1>
<div class="character">
<div id="jill">
<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
<title id="title">Contrast Checker</title>
<desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar.</desc>
<defs>
<clipPath id="scene">
<circle cx="125" cy="125" r="115"/>
...
Seeking advice on integrating Javascript code into Google Appscript. I have a separate Stylesheet.html file saved and need help with invoking the functions within it.
If anyone has suggestions on modifying this for Google Appscript, I'd greatly appreciate it.