function doGet() {
return HtmlService.createHtmlOutputFromFile("vi");
// var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
}
function doPost() {
return HtmlService.createHtmlOutputFromFile("vi");
// var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
}
// function from https://stackoverflow.com/a/9733420/3695983
function luminance(r, g, b) {
var a = [r, g, b].map(function (v) {
v /= 255;
return v <= 0.03928
? v / 12.92
: Math.pow( (v + 0.055) / 1.055, 2.4 );
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function calculateRatio(color1, color2) {
// read the colors and transform them into rgb format
// const color1 = document.querySelector("#color-1").value;
// const color2 = document.querySelector("#color-2").value;
const color1rgb = hexToRgb(color1);
const color2rgb = hexToRgb(color2);
// calculate the relative luminance
const color1luminance = luminance(color1rgb.r, color1rgb.g, color1rgb.b);
const color2luminance = luminance(color2rgb.r, color2rgb.g, color2rgb.b);
// calculate the color contrast ratio
const ratio = color1luminance > color2luminance
? ((color2luminance + 0.05) / (color1luminance + 0.05))
: ((color1luminance + 0.05) / (color2luminance + 0.05));
return ratio;
// Logger.log(ratio);
}
function hexToRgb(hex) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
// document.querySelector("btn").addEventListener("click", function() {
// const ratio = calculateRatio();
// // show results depending on WCAG requirements
// const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
// document.querySelector("#result").innerHTML = result;
// });<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<label>Foreground Color:</label> <input type="text" id="color-1" />
<label2>BackGround Color:</label2><input type="text" id="color-2" />
<button id="btn">Calculate Color Contrast</button>
<div id="#result">
<label>Result : </label>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var fcolor = document.getElementById("color-1").value;
var bgcolor = document.getElementById("color-2").value;
google.script.run.withSuccessHandler(ratio => {
const result = `
AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
document.getElementById("#result").innerHTML = result;
}).calculateRatio(fcolor, bgcolor);
}
// document.getElementById("btn").addEventListener("click", function() {
// const ratio = calculateRatio();
// // show results depending on WCAG requirements
// const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
// document.querySelector("#result").innerHTML = result;
// });
</script>
</body>
</html>I am trying to make a google script web app that takes input from an HTML form and passes the input from script. Right now, the function is failing because the resulted value is not getting printed in html page. How can I fix this?
However when I run this from the deployment, I am not getting the expected output. When I am entering the values and clicking on button, nothing happening. The same is working with javascript though. Can someone help me in using this code in Google AppScript? that how can I print the resulted output with the help of AppScript?
