franklinokech/Code.gs

## Code.gs
/*
This function renders the html file
*/
function doGet(event){


  return HtmlService.createTemplateFromFile("page").evaluate();
}

function userClick(Userinfo){
  /*
  Now we want to save whatever the username the user inputs in the text box into a spreadsheet.
  First we have to store the spreadsheet into a variable by getting its id
  */
  var id="1beVqbhcXrDTUNDiqbgO9Q-VgXau6ixOOc03BMTNFCqM";//spreadsheet id
  var ss=SpreadsheetApp.openById(id);
  var wsName="Data";//the worksheet from the spreadsheet stored in a var
  var ws=ss.getSheetByName(wsName);
  var currentTimeStampt=new Date();//get the current timestamp

  ws.appendRow([Userinfo.FirstName,Userinfo.LastName,Userinfo.Application,currentTimeStampt]);//rowContent is a one dimentional array
  //Logger.log(name +' clicked the button');
}

/*
   A function to create the html output by passing the file name by grabbing its content
*/
function include(filename){

return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

## page-css.html
 <style>
        .userInput{
        margin-bottom:15px;
        }
    </style>

## page-js.html
<script>
  //initialize the select option elementrs
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
      });


    document.getElementById('btnRunIt').addEventListener('click',doStuff);

    function doStuff(){

    var Userinfo={};

    Userinfo.FirstName=document.getElementById('fn').value;
    Userinfo.LastName=document.getElementById('ln').value;
    Userinfo.Application=document.getElementById('application').value;


      google.script.run.userClick(Userinfo);//run server side function
      var  FirstName=document.getElementById('fn').value="";
      var   LastName=document.getElementById('ln').value="";
      var Application=document.getElementById('application');
      Application.selectedIndex=0;
      M.FormSelect.init(Application);
    }
    </script>

## page.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include('page-css'); ?>


  </head>
  <body>

   <div class="container">
    <div class="row">
        <div class="input-field col s6">
          <input id="fn" type="text" class="validate">
          <label for="fn">First Name</label>
        </div><!--CLOSE div row -->
        <div class="input-field col s6">
          <input id="ln" type="text" class="validate">
          <label for="ln">Last Name</label>
        </div><!--CLOSE div input field -->
      </div><!--CLOSE div row -->


    <div class="row">
     <div class="input-field col s6">
    <select id="application">
      <option value="" disabled selected>Choose your option</option>
        <option>Google Sheets<option/>
        <option>Microsift Excel<option/>
        <option>Libre Calc<option/>
        <option>Other<option/>
    </select>
    <label>Application</label>
  </div><!--CLOSE div input field -->
  </div><!--CLOSE div row -->


    <div class="row">
        <button class="waves-effect waves-light btn" id="btnRunIt"><i class="material-icons left">add_circle_outline</i>Submit</button>
    </div><!-- CLOSE button row div -->

    </div><!-- Close container div -->


    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include('page-js'); ?>
  </body>
</html>
	/*
	This function renders the html file
	*/
	function doGet(event){


	return HtmlService.createTemplateFromFile("page").evaluate();
	}

	function userClick(Userinfo){
	/*
	Now we want to save whatever the username the user inputs in the text box into a spreadsheet.
	First we have to store the spreadsheet into a variable by getting its id
	*/
	var id="1beVqbhcXrDTUNDiqbgO9Q-VgXau6ixOOc03BMTNFCqM";//spreadsheet id
	var ss=SpreadsheetApp.openById(id);
	var wsName="Data";//the worksheet from the spreadsheet stored in a var
	var ws=ss.getSheetByName(wsName);
	var currentTimeStampt=new Date();//get the current timestamp

	ws.appendRow([Userinfo.FirstName,Userinfo.LastName,Userinfo.Application,currentTimeStampt]);//rowContent is a one dimentional array
	//Logger.log(name +' clicked the button');
	}

	/*
	A function to create the html output by passing the file name by grabbing its content
	*/
	function include(filename){

	return HtmlService.createHtmlOutputFromFile(filename).getContent();
	}
	<script>
	//initialize the select option elementrs
	document.addEventListener('DOMContentLoaded', function() {
	var elems = document.querySelectorAll('select');
	var instances = M.FormSelect.init(elems);
	});


	document.getElementById('btnRunIt').addEventListener('click',doStuff);

	function doStuff(){

	var Userinfo={};

	Userinfo.FirstName=document.getElementById('fn').value;
	Userinfo.LastName=document.getElementById('ln').value;
	Userinfo.Application=document.getElementById('application').value;




	google.script.run.userClick(Userinfo);//run server side function
	var FirstName=document.getElementById('fn').value="";
	var LastName=document.getElementById('ln').value="";
	var Application=document.getElementById('application');
	Application.selectedIndex=0;
	M.FormSelect.init(Application);
	}
	</script>
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<!--Import Google Icon Font-->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<?!= include('page-css'); ?>


	</head>
	<body>

	<div class="container">
	<div class="row">
	<div class="input-field col s6">
	<input id="fn" type="text" class="validate">
	<label for="fn">First Name</label>
	</div><!--CLOSE div row -->
	<div class="input-field col s6">
	<input id="ln" type="text" class="validate">
	<label for="ln">Last Name</label>
	</div><!--CLOSE div input field -->
	</div><!--CLOSE div row -->



	<div class="row">
	<div class="input-field col s6">
	<select id="application">
	<option value="" disabled selected>Choose your option</option>
	<option>Google Sheets<option/>
	<option>Microsift Excel<option/>
	<option>Libre Calc<option/>
	<option>Other<option/>
	</select>
	<label>Application</label>
	</div><!--CLOSE div input field -->
	</div><!--CLOSE div row -->


	<div class="row">
	<button class="waves-effect waves-light btn" id="btnRunIt"><i class="material-icons left">add_circle_outline</i>Submit</button>
	</div><!-- CLOSE button row div -->

	</div><!-- Close container div -->


	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<?!= include('page-js'); ?>
	</body>
	</html>