JSFiddle - React, Tailwind, and code Playground

by lightwand

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // google.charts.load('current', {packages: ['corechart']});
       //google.charts.setOnLoadCallback(getData);

      function AddRow()
    {
      var firstName = document.getElementById("firstName").value;
      var lastName = document.getElementById("lastName").value;
      var center = document.getElementById("center").value;
      var emaill = document.getElementById("emaill").value;
      var phone = document.getElementById("phone").value;
      var passwordd = document.getElementById("passwordd").value;
      // var usernamee = document.getElementById("usernamee").value;
      
      if (firstName==""|| lastName==""||center==""|| emaill==""|| phone==""||passwordd=="") {
        return false;
      }
      else 
      {
      //google.script.run.AddRecord(firstName,lastName,center,emaill,phone,passwordd);
      google.script.run.withSuccessHandler(function(existsMember)
          {
           if (existsMember == 'FALSE')
           {
             document.getElementById("page2_id1").className = "page2_id1-off";
             document.getElementById("page3_id1").className = "page3_id1";
           }
           else if(existsMember == 'TRUE')
           {
             document.getElementById("page2_id1").className = "page2_id1-off";
             document.getElementById("page3a_id1").className = "page3a_id1";
           }
          }
          ).AddRecord(firstName,lastName,center,emaill,phone,passwordd);
      }
    }

     function LoginUser()
    {
    // var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    var position = 0;
    var centerName =''
    

    google.script.run.withSuccessHandler(function(output) 
   ...

JavaScript

function doGet(e) {

      var x = HtmlService.createTemplateFromFile("index");
      var y = x.evaluate();
      var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

    /*Logger.log("Display the value for charts:  " + charts)
    if (charts == 'TRUE')
    {
      Logger.log ("Display inside the if statement for doGet Function")
       var x = HtmlService.createTemplateFromFile("charts");
       var y = x.evaluate();
       var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    }
    else
    {
      Logger.log ("Display inside the else statement if the doGet function")
      var x = HtmlService.createTemplateFromFile("index");
      var y = x.evaluate();
      var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    }
    
    //Logger.log(JSON.stringify(e));
    //Logger.log ("Display X: " + x);
    //Logger.log ("Display y: " + y);
    //Logger.log ("Display Z: " + z);
    //Logger.log(JSON.stringify(e));
    //Logger.log(e.parameter.page);*/
  
  return z;
  
}

function onSpreadsheetSubmit(e) 
{
  //var values = e.values;
  
  var email = "";
  var activeSheetName = e.source.getActiveSheet().getName();
  var sheetName = e.source.getSheetByName("DATA");
  var lastRow = sheetName.getLastRow();
  var chart = 'FALSE'
  //var activeFormName = e.source.getActiveForm().getName()
  //var a = HtmlService.createTemplateFromFile("charts");
  //var b = a.evaluate();
 // var c = b.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    
  //Logger.log ("Display Active Sheet Name:  " + activeSheetName);
  //Logger.log ("Display Active Form Name:   " + activeFormName);

  sheetName.activate()
   
   if (activeSheetName == '1 - Day')
   {
      email = e.values[1];
      //Logger.log ("Display Day 1 email:  " + email);
      for(var i = 2; i <= lastRow; i++)
        {

         if(sheetName.getRange(i, 1).getValue().toUpperCase() == email.toUpperCase())
           {
              days =...