MSV FM

dot.antimicrobial@66.96.161.157: ~ $
Path : /hermes/sb_web/b1536/advancedfunctions.co/aip/
File Upload :
Current < : /hermes/sb_web/b1536/advancedfunctions.co/aip/index.html

<!DOCTYPE html>
<html lang="en">
<title>Learn²Invent.co</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='googleSheetsPortal.js'></script>
<script src='trafficLight.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://www.paypal.com/sdk/js?client-id=AWmEooe86Qr3jEGzKcpu52SUgk5D5JiQoOnd6_9Z4Z9-UEPa3A1E6l9duiY6uwOTWWYqefCidROxrAxS&currency=USD" data-sdk-integration-source="button-factory"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
div.autoScroll{overflow:auto;padding-right:15px;}
div.autoScroll:hover{overflow:auto;padding-right:15px;}
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<!-- Header -->
<header class="w3-container w3-red w3-center"  style="position-top:30px;max-height:158px; height:158px;padding:158px 16px; background-image: url('bg.jpg');  background-size:cover">
  <span class="w3-margin w3-large w3-show-small w3-hide-medium w3-hide-large" id='pageThemeSmall'></span>
  <span class=" w3-jumbo w3-hide-small w3-show-medium w3-show-large"  id='pageThemeBig'></span>
</header>

<body onload="myFunction();javascript:page('home');javascript:getProducts()"; style='background-color:floralwhite'>
<div id='productView'></div>

<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-red w3-card w3-right-align w3-large">
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="javascript:page('home')" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"> HOME</a>
    <a href="javascript:page('classroom')" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"> CLASSROOM</a>
    <a href="javascript:page('shop')" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"> SHOP</a>
    <a href="javascript:page('inventorServices')" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"> INVENTOR SERVICES</a>

  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
<a href="javascript:page('home')" class="w3-bar-item w3-button w3-padding-large">HOME</a>
    <a href="javascript:page('classroom')" class="w3-bar-item w3-button w3-padding-large"> CLASSROOM</a>
    <a href="javascript:page('shop')" class="w3-bar-item w3-button w3-padding-large"> SHOP</a>
    <a href="javascript:page('inventorServices')" class="w3-bar-item w3-button w3-padding-large"> INVENTOR SERVICES</a>

  </div>
</div>

<div id='signupView' style='display:none;height:300px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.2);width:300px;position:fixed;left:50%;top:50px;transform:translate(-50%,0%);z-index:2;background-color:rgba(25,25,25,0.8);padding:40px 20px;color:white;'><input style='outline:none;font:18px Calibri;background-color:rgba(0,0,0,0);border:none;border-bottom:solid 1px;margin:10px;' placeholder='Enter first name' id='firstName' autocomplete='off'></input><br><input style='outline:none;font:18px Calibri;background-color:rgba(0,0,0,0);border:none;border-bottom:solid 1px;margin:10px;' placeholder='Enter last name' id='lastName' autocomplete='off'></input><br><input style='outline:none;font:18px Calibri;background-color:rgba(0,0,0,0);border:none;border-bottom:solid 1px;margin:10px;' placeholder='Enter email' id='email' autocomplete='off'></input><br><h5 style='margin-top:40px;font:18px Calibri;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.2); padding:5px 5px;cursor:pointer;text-align:center;' onclick='{document.getElementById(&#39;signupView&#39;).style.display=&#39;none&#39;;registerStudent();}'>&nbsp; Submit&nbsp;</h5></div>

<div id='addClassView' style='display:none;height:300px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.2);width:300px;position:fixed;left:50%;top:50px;transform:translate(-50%,0%);z-index:2;background-color:rgba(25,25,25,0.8);padding:40px 20px;color:white;'><input oninput='javascript:addToClass(this.value)'  style='outline:none;font:20px Calibri;background-color:rgba(0,0,0,0);border:none;border-bottom:solid 1px;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);' autocomplete='off' placeholder='Enter class code'></input></div>

<!-- First Grid -->

<div class=" w3-hide-small w3-hide-medium w3-show-large"  class="w3-row-padding w3-padding-64 w3-container" id='bigView'></div>

<div  class="w3-show-small w3-show-medium w3-hide-large" class=" w3-container" id='smallView'></div>
<div class="w3-row-padding w3-padding-64 w3-container" id='firstGrid'></div>



<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">
</div>

<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">  
  <div class="w3-xlarge w3-padding-32">
    <i class="fab fa-facebook-f w3-hover-opacity"></i>
    <i class="fab fa-instagram w3-hover-opacity"></i>
    <i class="fab fa-snapchat w3-hover-opacity"></i>
    <i class="fab fa-pinterest-p w3-hover-opacity"></i>
    <i class="fab fa-twitter w3-hover-opacity"></i>
    <i class="fab fa-linkedin w3-hover-opacity"></i>
 </div>

</footer>

<script>
var googleSheetsPortalScript='https://script.google.com/macros/s/AKfycbyCCph26e-nauDlep-CmLOL2ObfuDN6ADJylMDDbLXFfG1VUhA/exec';
var googleSheetsClassroom='https://script.google.com/macros/s/AKfycbyB8psOXwFeAUEmly0y0led9ThqBffO0xScNtZF3g5rp3QxY4TN/exec';
var googleSheetsLogin='https://script.google.com/macros/s/AKfycbzJXsqiSMe02TXPAV1Pfd1D6sBwFSaJlzkhmSBfNcti62apVSU/exec';

var productList=[];
var productCount=0;
var categoryNames=[];
var numberOfItemsInCart=0;

var teachersEmail='';
var quantity='';

var shoppingListProduct=[];
var shoppingListArray=[];

var total=0.00;
var sum=0.00;
var tax=0.00;

var passcode='';

var errorFound=false;

function getProducts(){
sendDataToGoogleSheets(['getProducts'],googleSheetsPortalScript);}

function receiveDataFromGoogleSheets(){
waitForGoogleThenExecute();
if(getDataFromGoogleSheetsAsArray()[0]=='productsFound'){
var tempArray=getDataFromGoogleSheetsAsArray();
var categoriesArray=tempArray[1].split('*^^^*');
categoryNames=categoriesArray[0].split('*^^^^*');

for(var i=1;i<categoriesArray.length;i++){
console.log(categoryNames[i-1]);
var product=categoriesArray[i].split('*^^^^*');
for(var j=1;j<product.length;j++)
{
var productDescription=product[j].split('*^^^^^*');
productList[productCount]=[categoryNames[i-1],productDescription[0],productDescription[1],productDescription[2],productDescription[3],productDescription[4]];
productCount++;
for(var k=0;k<productDescription.length;k++){
console.log("      "+productDescription[k]);

}


}
}
}

if(getDataFromGoogleSheetsAsArray()[0]=='newClassRegistered'){
console.log('Approved');
sendDataToGoogleSheets(['newClass',getDataFromGoogleSheetsAsArray()[1],getDataFromGoogleSheetsAsArray()[2],getDataFromGoogleSheetsAsArray()[3]],googleSheetsClassroom);
}



console.log(getDataFromGoogleSheetsAsArray()[0]);
if(getDataFromGoogleSheetsAsArray()[0]=='loginSuccessful'){
document.getElementById('loginCodesSmall').innerHTML='';document.getElementById('loginCodesLarge').innerHTML='';
generateClassroom();}

if(getDataFromGoogleSheetsAsArray()[0]=='invalidCode'){
document.getElementById('loginCodesSmall').innerHTML='';document.getElementById('loginCodesLarge').innerHTML='';
passcode='';}

if(getDataFromGoogleSheetsAsArray()[0]=='registrationSuccessful'){
document.getElementById('loginCodesSmall').innerHTML='Awesome! Check email for passcode!';
document.getElementById('loginCodesLarge').innerHTML='Awesome! Check email for passcode!';
passcode='';
}

}

function waitForGoogleThenExecute(){}


function page(pageName){

myFunction() ;

if(pageName=='home'){
document.getElementById('bigView').innerHTML="<div class=\"w3-content\" style='width:95%'><div class=\"w3-twothird\"><h1>What We Do</h1><h5 class=\"w3-padding-32\">We offer services from learning STEM, to providing technical assistance to help you make your invention.</h5><p class=\"w3-text-grey\"><ul><li>Learn to program microcontrollers, 3D model and use rapid prototyping machines</li><li>Shop for fun STEM kits (and parts)</li><li>Rapid prototype your ideas with 3D printers, laser cutters, CNC machines and microcontrollers</li><li>Let us program, 3D design or prototype </li><li>Let's help you design and realize your inventions.</li></ul></p></div><div class=\"w3-third w3-center\"><i class=\"fa fa-anchor w3-padding-64 w3-text-red\"></i></div></div>";

document.getElementById('smallView').innerHTML="<div class=\"w3-content\" style='width:95%'><div class=\"w3-twothird\"><h1>What We Do</h1><h5 class=\"w3-padding-32\">We offer services from learning STEM, to providing technical assistance to help you make your invention.</h5><p class=\"w3-text-grey\"><ul><li>Learn to program microcontrollers, 3D model and use rapid prototyping machines</li><li>Shop for fun STEM kits (and parts)</li><li>Rapid prototype your ideas with 3D printers, laser cutters, CNC machines and microcontrollers</li><li>Let us program, 3D design or prototype </li><li>Let's help you design and realize your inventions.</li></ul></p></div><div class=\"w3-third w3-center\"><i class=\"fa fa-anchor w3-padding-64 w3-text-red\"></i></div></div>";

document.getElementById('pageThemeSmall').innerHTML="<span style='font-size:25px;'>Learn²Invent.co";
document.getElementById('pageThemeBig').innerHTML='Learn²Invent.co';
}
if(pageName=='classroom'){
console.log('inclassroom');
document.getElementById('bigView').innerHTML='';
document.getElementById('smallView').innerHTML='';
document.getElementById('bigView').innerHTML="<div class=\"w3-content\" style='width:95%'><div class=\"w3-twothird\"><h1>Enter your code</h1><h5 class=\"w3-padding-32\"></h5><p class=\"w3-text-grey\"><ul><li>Enter 1111111 to create a login code.</li><li>Keyboard shortcuts: <b><ul><li>1&nbsp;&nbsp; <span style='color:#da532c;'>&#8726;</span></li><li>2&nbsp;&nbsp; <span style='color:#00aba9;'>&#10005;</span></li><li>3&nbsp;&nbsp; <span style='color:#6b5b95;'>&#9651;</span></li><li>4&nbsp;&nbsp; <span style='color:#d3a42e;'>&#9634;</span></li></ul></b></li></ul></p></div><div class=\"w3-third w3-center\"><i class=\"fa fa-anchor w3-padding-64 w3-text-red\"></i></div></div>";

document.getElementById('smallView').innerHTML="<div class=\"w3-content\" style='width:95%'><div class=\"w3-twothird\"><h1>Enter your code</h1><h5 class=\"w3-padding-32\"></h5><p class=\"w3-text-grey\"><ul><li>Enter 1111111 to create a login code.</li><li>Keyboard shortcuts: <b><ul><li>1&nbsp;&nbsp; <span style='color:#da532c;'>&#8726;</span></li><li>2&nbsp;&nbsp; <span style='color:#00aba9;'>&#10005;</span></li><li>3&nbsp;&nbsp; <span style='color:#6b5b95;'>&#9651;</span></li><li>4&nbsp;&nbsp; <span style='color:#d3a42e;'>&#9634;</span></li></ul></b></li></ul></p></div><div class=\"w3-third w3-center\"><i class=\"fa fa-anchor w3-padding-64 w3-text-red\"></i></div></div>";

document.getElementById('pageThemeSmall').innerHTML="<div>  <button onclick=\"javascript:loginCode('&#8726;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#6b5b95;color:white;'>&#8726;</button> <button onclick=\"javascript:loginCode('&#10005;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#00aba9;color:white;'>&#10005;</button> <button onclick=\"javascript:loginCode('&#9651;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#da532c;color:white;'>&#9651;</button> <button onclick=\"javascript:loginCode('&#9634;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#d3a42e;color:white;'>&#9634;</button></div><div id='loginCodesSmall' style='font-size:20px;'></div>";

document.getElementById('pageThemeBig').innerHTML="<div><button onclick=\"javascript:loginCode('&#8726;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#6b5b95;color:white;'>&#8726;</button> <button onclick=\"javascript:loginCode('&#10005;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#00aba9;color:white;'>&#10005;</button> <button onclick=\"javascript:loginCode('&#9651;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#da532c;color:white;'>&#9651;</button> <button onclick=\"javascript:loginCode('&#9634;')\"  type='button' class='btn btn-primary' style='border:none;font-size:35px;padding:5px 5px; background-color:#d3a42e;color:white;'>&#9634;</button></div><div id='loginCodesLarge' style='font-size:20px;'></div>";


}
if(pageName=='shop'){

document.getElementById('pageThemeSmall').innerHTML="<div><input style='padding:10px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:300px;color:black;font-size:15px;' placeholder='&#x1F50E; &nbsp;Product search'></input><div><button style='margin:0px;background-color:black;color:white;font-size:15px;padding:5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:300px;margin-top:10px;' id='cartButtonSmall' ><div style='cursor:pointer' onclick='javascript:generateShoppingList()'><i class='fa fa-shopping-cart'></i> cart <b><span id='itemCounterSmall' style='color:orange;'>"+numberOfItemsInCart+"</span></b></div></button></div></div>";

document.getElementById('pageThemeBig').innerHTML="<input style='padding:10px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:300 px;color:black;font-size:20px;' placeholder='&#x1F50E; &nbsp;Product search'>&nbsp;&nbsp;<button  style='background-color:black;color:white;font-size:20px;padding:5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:110px;' id='cartButtonBig'><div  style='cursor:pointer;' onclick='javascript:generateShoppingList()'><i class='fa fa-shopping-cart' ></i> cart <b><span id='itemCounterBig' style='color:orange;'  >"+numberOfItemsInCart+"</span></b></div></button>";

document.getElementById('firstGrid').innerHTML='';
generatePreview();

}

if(pageName=='inventorServices'){
}

}

function generatePreview(){

var uIToGenerate="<div style='margin:20px' ><h3 class=\"w3-content\" align='right'><span style='background-color:rgb(244,67,54);color:white;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;padding:10px 10px;'>Featured</span></h3></div>";
var categoryCount=0;
var numberOfItems=0;
for(var i=0;i<productList.length;i++){
if(productList[i][0]==categoryNames[categoryCount]&&numberOfItems<4){
if(numberOfItems==0){
uIToGenerate=uIToGenerate+"<div style='margin:20px;clear:left;'><h1 class=\"w3-content\" style='color:gray;' >"+productList[i][0]+"</h1></div>"+"<div class=\"w3-content\" >";}
uIToGenerate=uIToGenerate+getBrowserAd(productList[i][0],productList[i][2],productList[i][3],productList[i][1],productList[i][4],productList[i][5]);
numberOfItems++;
if(numberOfItems==4){
uIToGenerate=uIToGenerate+"</div><div class=\"w3-content\" ></div>";
numberOfItems=0;
categoryCount++;}
}
}

document.getElementById('bigView').innerHTML=uIToGenerate;
document.getElementById('smallView').innerHTML=uIToGenerate.replaceAll('t:left;width:20%','t:left;width:40%').replaceAll('margin:20px;','margin:10px;');

document.getElementById('cartButtonBig').innerHTML="<div  style='cursor:pointer;' onclick='javascript:generateShoppingList()'><i class='fa fa-shopping-cart' ></i> cart <b><span id='itemCounterBig' style='color:orange;'  >"+numberOfItemsInCart+"</span></div>";

document.getElementById('cartButtonSmall').innerHTML="<div  style='cursor:pointer;' onclick='javascript:generateShoppingList()'><i class='fa fa-shopping-cart' ></i> cart <b><span id='itemCounterSmall' style='color:orange;'  >"+numberOfItemsInCart+"</span></div>";
}

function generateShoppingList(){
var uIGenerateShoppingSmall="<div style='margin:40px'></div>";

document.getElementById('cartButtonBig').innerHTML="<div style='cursor:pointer;' onclick='javascript:generatePreview()'><i class='fas fa-shopping-basket' ></i> <span style='color:orange;'>store</span></div>";

document.getElementById('cartButtonSmall').innerHTML="<div style='cursor:pointer;' onclick='javascript:generatePreview()'><i class='fas fa-shopping-basket' ></i> <span style='color:orange;'>store</span></div>";

for(var i=0;i<shoppingListArray.length;i++){
if(shoppingListArray[i][0]=='Courses'){
uIGenerateShoppingSmall=uIGenerateShoppingSmall+"<div style='position:relative;left:50%;transform:translate(-50%,0%);box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);background-color:white;float:left;width:90%;padding:20px 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin-bottom:10px;'><div style='padding:15px 15px;width:100%;position:relative;left:50%;transform:translate(-50%,0%);background-color:whitesmoke;display:grid;grid-template-columns: 59% 20% 20%;grid-column-gap:1%;'><div style='display:inline-block;font:16px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:20px;'>"+shoppingListArray[i][1]+"</div><div style='display:inline-block;font:16px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:30px;text-align:center;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:black;color:orange;padding:5px;'><div id='"+shoppingListArray[i][5]+"SmallCourses' style='display:inline-block;'>"+shoppingListArray[i][6]+"</div></div><div onclick='javascript:removeItem("+i+")' style='display:inline-block;font:16px Calibri;text-align:center;color:gray;cursor:pointer;position:relative;top:50%;transform:translate(0%,-50%);height:30px;background-color:rgb(244,67,54);color:white;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px;'>&#x2715</div></div><input style='padding:10px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:100%;color:black;font-size:16px;display:inline-block;' placeholder='Enter teacher&#39;s email address...' value='"+shoppingListArray[i][2]+"' oninput='javascript:updateCartItem("+i+",2,this.value)'><div style='width:100%;'>"+makeSelectedDropDownMenu(i,3,shoppingListArray[i][3])+"</div></div>";}else{
uIGenerateShoppingSmall=uIGenerateShoppingSmall+"<div style='position:relative;left:50%;transform:translate(-50%,0%);box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);background-color:white;float:left;width:90%;padding:20px 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin-bottom:10px;'><div style='padding:15px 15px;width:100%;position:relative;left:50%;transform:translate(-50%,0%);background-color:whitesmoke;display:grid;grid-template-columns: 59% 20% 20%;grid-column-gap:1%;'><div style='display:inline-block;font:16px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:20px;'>"+shoppingListArray[i][1]+"</div><div style='display:inline-block;font:16px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:30px;text-align:center;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:black;color:orange;padding:5px;'><div id='"+shoppingListArray[i][5]+"Small' style='display:inline-block;'>"+shoppingListArray[i][6]+"</div></div><div onclick='javascript:removeItem("+i+")' style='display:inline-block;font:16px Calibri;text-align:center;color:gray;cursor:pointer;position:relative;top:50%;transform:translate(0%,-50%);height:30px;background-color:rgb(244,67,54);color:white;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px;'>&#x2715</div></div><div style='width:100%;'></div><input style='padding:10px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:100%;color:black;font-size:16px;display:inline-block;' placeholder='Quantity' value='"+shoppingListArray[i][3]+"' oninput='javascript:updateCartItemQuantity("+i+",3,this.value)'></div>";}
}

uIGenerateShoppingSmall=uIGenerateShoppingSmall+"<div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns: 60% 40%;grid-column-gap:1%;font:22px Calibri;'><div>Sum</div><div id='sumUiSmall' style='text-align:right'>$ "+sum+"</div></div><div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns: 60% 40%;grid-column-gap:1%;font:22px Calibri;'><div>Tax (12.5%)</div><div id='taxUiSmall' style='text-align:right'>$ "+tax+"</div></div><div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);font:22px Calibri;display:grid;grid-template-columns: 60% 40%;grid-column-gap:1%;'><div>Grand total</div><div id='totalUiSmall' style='text-align:right'>$ "+total+"</div></div><div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);font:22px Calibri;text-align:center;'  id='paypalButtonSmall'></div></div>";
/////
var uIGenerateShoppingBig="<div style='margin:40px'></div>";

for(var i=0;i<shoppingListArray.length;i++){
if(shoppingListArray[i][0]=='Courses'){
uIGenerateShoppingBig=uIGenerateShoppingBig+"<div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);background-color:whitesmoke;display:grid;grid-template-columns: 25% 25% 25% 15% 6%;grid-column-gap:1%;'><div style='display:inline-block;font:22px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:30px;'>"+shoppingListArray[i][1]+"</div><input style='padding:10px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:300 px;color:black;font-size:20px;display:inline-block;' placeholder='Enter teacher&#39;s email address...' value='"+shoppingListArray[i][2]+"' oninput='javascript:updateCartItem("+i+",2,this.value)'>"+makeSelectedDropDownMenu(i,3,shoppingListArray[i][3])+"<div style='display:inline-block;font:22px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:40px;text-align:center;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:black;color:orange;padding:7px;'><div id='"+shoppingListArray[i][5]+"BigCourses' style='display:inline-block;'>"+shoppingListArray[i][6]+"</div></div><div onclick='javascript:removeItem("+i+")' style='display:inline-block;font:22px Calibri;text-align:center;color:gray;cursor:pointer;position:relative;top:50%;transform:translate(0%,-50%);height:40px;background-color:rgb(244,67,54);color:white;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px;'>&#x2715</div></div>";}else{
uIGenerateShoppingBig=uIGenerateShoppingBig+"<div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);background-color:whitesmoke;display:grid;grid-template-columns: 25% 25% 25% 15% 6%;grid-column-gap:1%;'><div style='display:inline-block;font:22px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:30px;'>"+shoppingListArray[i][1]+"</div><div style='width:100%'></div><input style='padding:10px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;outline:none;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;width:300 px;color:black;font-size:20px;display:inline-block;' placeholder='Quantity' value='"+shoppingListArray[i][3]+"' oninput='javascript:updateCartItemQuantity("+i+",3,this.value)'><div style='display:inline-block;font:22px Calibri;position:relative;top:50%;transform:translate(0%,-50%);height:40px;text-align:center;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:black;color:orange;padding:7px;'><div id='"+shoppingListArray[i][5]+"Big' style='display:inline-block;'>"+shoppingListArray[i][6]+"</div></div><div onclick='javascript:removeItem("+i+")' style='display:inline-block;font:22px Calibri;text-align:center;color:gray;cursor:pointer;position:relative;top:50%;transform:translate(0%,-50%);height:40px;background-color:rgb(244,67,54);color:white;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px;'>&#x2715</div></div>";
}
}
uIGenerateShoppingBig=uIGenerateShoppingBig+"<div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns: 20% 20% 20% 20% 20%;grid-column-gap:1%;font:22px Calibri;'><div></div><div></div><div></div><div>Sum</div><div id='sumUiBig'>$ "+sum+"</div></div><div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns: 20% 20% 20% 20% 20%;grid-column-gap:1%;font:22px Calibri;'><div></div><div></div><div></div><div>Tax (12.5%)</div><div id='taxUiBig'>$ "+tax+"</div></div><div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns: 20% 20% 20% 20% 20%;grid-column-gap:1%;font:22px Calibri;'><div></div><div></div><div></div><div>Grand total</div><div id='totalUiBig'>$ "+total+"</div></div><div style='padding:15px 15px;width:80%;position:relative;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns: 60% 40%;grid-column-gap:1%;font:22px Calibri;text-align:center;'><div></div><div id='paypalButtonBig'></div></div>";

//<div style='background-color:black;color:orange;padding:5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;'>Pay</div>

document.getElementById('firstGrid').innerHTML='';
document.getElementById('bigView').innerHTML=uIGenerateShoppingBig;
document.getElementById('smallView').innerHTML=uIGenerateShoppingSmall;

generateCartItemQuantity();
}

function getBrowserAd(category,picture,description,name,price,inStock){
return "<div onclick='javascript:showProduct(&#39;"+category+"&#39;,&#39;"+picture+"&#39;,&#39;"+description+"&#39;,&#39;"+name+"&#39;,&#39;"+price+"&#39;,&#39;"+inStock+"&#39;)' style='max-width:200px;max-height:350px;min-height:350px;box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);background-color:white;float:left;width:20%;padding:20px 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin:20px;cursor:pointer;'><img style='-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:100%;padding:auto auto;' src='"+picture+"' ><br><div style='font-family:Montserrat, sans-serif;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;' ><br>"+name+"<br></div><div>In stock: "+inStock+"</div><div style='-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-align:right;background-color:black;color:orange;padding: 5px 10px;font-size:15px;'>$ "+price+"</div></div>";
}

function getClassButton(category,picture,description,name,price,inStock){
return "<div onclick='javascript:showClass(&#39;"+name+"&#39;)' style='max-width:200px;box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);background-color:white;float:left;width:20%;padding:20px 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin:20px;cursor:pointer;'><img style='-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:100%;padding:auto auto;' src='"+picture+"' ><br><div style='font-family:Montserrat, sans-serif;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;' ><br>"+name+"<br></div><br><div style='-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-align:right;color:grey;padding: 5px 10px;font-size:15px;'>M: 4-5 p.m</div><div style='-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-align:right;background-color:black;color:orange;padding: 5px 10px;font-size:15px;'>W: 4-5 p.m</div><div style='-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-align:right;color:grey;padding: 5px 10px;font-size:15px;'>F: 4-5 p.m</div></div>";
}

function showAddClass(){
document.getElementById('addClassView').style.display='block';
console.log(passcode);
}

function getAddClassButton(){
return "<div onclick='javascript:showAddClass()' style='max-width:200px;box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);background-color:white;float:left;width:20%;padding:20px 20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin:20px;cursor:pointer;'><div style='width:100%;text-align:center;color:lightblue;font:120px Calibri;'>+</div><div style='width:100%;text-align:center;color:lightblue;font:30px Calibri;'>Add Course</div></div>";
}

function showClass(name){
document.getElementById('pageThemeSmall').innerHTML="<div style='cursor:pointer;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);width:200px;position:relative;left:50%;transform:translate(-50%,0%);font:30px Arial;'><i class='fa fa-video-camera'></i> Join class</div>";
document.getElementById('pageThemeBig').innerHTML="<div style='cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);width:400px;position:relative;left:50%;transform:translate(-50%,0%);'><i class='fa fa-video-camera'></i> Join class</div>";

var classBigUi="<div style='width:75%;margin:auto;padding:1vw;font-family: &#39;Titillium Web&#39;, sans-serif;font-size:3vh;' >T R A F F I C &nbsp;&nbsp;L I G H T S</div><div id='functionsDialogWithTextBig' style = 'display:none; z-index: 1;position:sticky;top:46px;'><div class='w3-card-4 w3-container w3-white w3-animate-left'><div class='w3-left w3-threequarter'><h1>&nbsp;&nbsp;<button id='closeButton' class='w3-btn' onclick='exitDialogs()' style='background-color:white; color:gray;'><i class='fas fa-angle-double-left'></i></button></h1></div><div id='functionsDialogTextBig' class='w3-left' style ='display:none;width:100%'></div><br><br></div></div>";

var classSmallUi="<div style='width:100%;margin-top:80px;margin-bottom:80px;font-family: &#39;Titillium Web&#39;, sans-serif;font-size:5vh;text-align:center;' >TRAFFIC LIGHTS</div><div id='functionsDialogWithTextSmall' style = 'display:none; z-index: 1;position:sticky;top:46px;'><div class='w3-card-4 w3-container w3-white w3-animate-left'><div class='w3-left w3-threequarter'><h1>&nbsp;&nbsp;<button id='closeButton' class='w3-btn' onclick='exitDialogs()' style='background-color:white; color:gray;'><i class='fas fa-angle-double-left'></i></button></h1></div><div id='functionsDialogTextSmall' class='w3-left' style ='display:none;width:100%'></div><br><br></div></div>";


document.getElementById('bigView').innerHTML=classBigUi+"<span id='videoFilesBig'></span>";
document.getElementById('smallView').innerHTML=classSmallUi+"<span id='videoFilesSmall'></span>";
display(0);
}

function translateCodeCharacter(){
return passcode.replaceAll('1','∖&nbsp;&nbsp;').replaceAll('2','✕&nbsp;&nbsp;').replaceAll('3','△&nbsp;&nbsp;').replaceAll('4','▢&nbsp;&nbsp;').trim();
}


function addToClass(classCode){
console.log(classCode);
if(classCode>1000000){
console.log('sending',classCode,passcode);
sendDataToGoogleSheets(['addToClass',classCode,passcode],googleSheetsClassroom);
document.getElementById('addClassView').style.display='none';
}

}

function loginCode(codeCharacter){

if(codeCharacter=='∖'){
passcode=passcode+'1';
}
if(codeCharacter=='✕'){
passcode=passcode+'2';
}
if(codeCharacter=='△'){
passcode=passcode+'3';
}
if(codeCharacter=='▢'){
passcode=passcode+'4';
}

if(passcode.length<7){

document.getElementById('loginCodesSmall').innerHTML=translateCodeCharacter();document.getElementById('loginCodesLarge').innerHTML=translateCodeCharacter();
}else{
if(passcode==1111111){
showRegistrationPanel();}else{
document.getElementById('loginCodesSmall').innerHTML='Processing...';document.getElementById('loginCodesLarge').innerHTML="Processing...";
sendDataToGoogleSheets(['login',passcode],googleSheetsLogin);}
}
}

function showRegistrationPanel(){
document.getElementById('loginCodesSmall').innerHTML='';document.getElementById('loginCodesLarge').innerHTML='';
passcode='';
document.getElementById('signupView').style.display='block';}

function registerStudent(){
var firstName=document.getElementById('firstName').value;
var lastName=document.getElementById('lastName').value;
var email=document.getElementById('email').value;

document.getElementById('loginCodesSmall').innerHTML='Updating...';
document.getElementById('loginCodesLarge').innerHTML='Updating...';
sendDataToGoogleSheets(['register',passcode,firstName,lastName,email],googleSheetsLogin);
}

function generateClassroom(){

document.getElementById('loginCodesSmall').innerHTML='';document.getElementById('loginCodesLarge').innerHTML='';

var uIToGenerate="<div style='margin:20px;cursor:pointer;' ><h3 class=\"w3-content\" align='right'></h3></div>";
var categoryCount=0;
var numberOfItems=0;
for(var i=0;i<1;i++){
if(productList[i][0]==categoryNames[categoryCount]&&numberOfItems<4){
if(numberOfItems==0){
uIToGenerate=uIToGenerate+"<div style='margin:20px;clear:left;'><h1 class=\"w3-content\" style='color:gray;' >"+productList[i][0]+"</h1></div>"+"<div class=\"w3-content\" >";}
//un comment uIToGenerate=uIToGenerate+getClassButton(productList[i][0],productList[i][2],productList[i][3],productList[i][1],productList[i][4],productList[i][5]);
numberOfItems++;
if(numberOfItems==4){
uIToGenerate=uIToGenerate+"</div><div class=\"w3-content\" ></div>";
numberOfItems=0;
categoryCount++;}
}
}

document.getElementById('bigView').innerHTML=uIToGenerate+getAddClassButton();
document.getElementById('smallView').innerHTML=(uIToGenerate+getAddClassButton()).replaceAll('t:left;width:20%','t:left;width:40%').replaceAll('margin:20px;','margin:10px;');

}

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}




function showProduct(category,picture,description,name,price,inStock){
document.getElementById('productView').style.display='block';
var productViewUi='';
var costId=(new Date()).getTime();
if(category=='Courses'){
productViewUi="<div id='productView' class='autoScroll' style='height:440px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.2);width:300px;position:fixed;left:50%;top:50px;transform:translate(-50%,0%);z-index:2;background-color:white;padding:10px 20px'><div style='float:right;padding:5px 5px;text-align:center;margin:10px;color:dodgerblue;'><h5 style='-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2); padding:5px 5px;cursor:pointer' onclick='javascript:closeProductView()'>&nbsp; close &nbsp;</h5></div><img style='width:100%;padding:auto auto;' src='"+picture+"' ><h3>"+name+"</h3>"+description+"<hr><div style='width:100%;text-align:right;'>In stock: "+inStock+"</div><textarea oninput='javascript:textTyped(this.value)' style=';padding:10px 10px;width:100%;height:40px;resize:none;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin-top:10px;border:none;overflow:hidden;' placeholder='Enter teacher&#39;s email address...'></textarea><div style='position:relative;top:0px;height:40px;'><select style='position:relative;left:0px;float:left;padding:5px 5px;margin-left:0px;width:100%;margin-top:15px;' onchange='javascript:choiceSelected(&#39;Courses&#39;,"+costId+","+price+",this.value)'><option value=''>Class size (# of students)</option><option value='5'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option></select></div><div style='position:relative;top:20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-align:right;background-color:black;color:orange;padding: 5px 10px;font-size:15px;'><div id='"+costId+"Courses' style='display:inline-block;'></div></div><div onclick='javascipt:addItemToCart(&#39;"+category+"&#39;,&#39;"+name+"&#39;,&#39;"+price+"&#39;,"+costId+")' style='cursor:pointer'><div style='float:right;padding:5px 0px;text-align:center;margin-top:10px;margin-right:0px;color:dodgerblue;'><h1 style='-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2); '>&nbsp; + &nbsp;</h1></div></div></div>";}else{
productViewUi="<div id='productView' class='autoScroll' style='height:480px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.2);width:300px;position:fixed;left:50%;top:50px;transform:translate(-50%,0%);z-index:2;background-color:white;padding:10px 20px'><div style='float:right;padding:5px 5px;text-align:center;margin:10px;color:dodgerblue;'><h5 style='-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2); padding:5px 5px;cursor:pointer' onclick='javascript:closeProductView()'>&nbsp; cloise &nbsp;</h5></div><img style='width:100%;padding:auto auto;' src='"+picture+"' ><h3>"+name+"</h3>"+description+"<hr><div style='width:100%;text-align:right;'>In stock: "+inStock+"</div><textarea oninput='javascript:choiceSelected(&#39;&#39;"+","+costId+","+price+",this.value)' style='padding:10px 10px;width:100%;height:40px;resize:none;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin-top:10px;border:none;' placeholder='Quantity'></textarea><div style='margin-top:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-align:right;background-color:black;color:orange;padding: 5px 10px;font-size:15px;'><div id='"+costId+"' style='display:inline-block;'></div></div><div onclick='javascipt:addItemToCart(&#39;"+category+"&#39;,&#39;"+name+"&#39;,&#39;"+price+"&#39;,"+costId+")' style='cursor:pointer'><div style='float:right;padding:5px 0px;text-align:center;margin-top:10px;margin-right:0px;color:dodgerblue;'><h1 style='-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2); '>&nbsp; + &nbsp;</h1></div></div></div>";
}

document.getElementById('productView').innerHTML=productViewUi;
}

function textTyped(text){
teachersEmail=text;
}

function choiceSelected(category,costId,price,amount){
quantity=amount;
if(category=='Courses'){
document.getElementById(costId+'Courses').innerHTML='$ '+price/5*amount;}else{
document.getElementById(costId).innerHTML='$ '+price*amount;}

}

function updateCartItem(a,b,value){
shoppingListArray[a][b]=value;
var quantity=shoppingListArray[a][3];
var teachersEmail=shoppingListArray[a][2];
console.log(shoppingListArray);
var errorMessage='Error';
if(teachersEmail==''||!(/^[0-9]+$/).test(quantity)||quantity<1){
errorFound=true;
document.getElementById(shoppingListArray[a][5]+'BigCourses').innerHTML=errorMessage;
document.getElementById(shoppingListArray[a][5]+'SmallCourses').innerHTML=errorMessage;
document.getElementById('paypal-button-container').innerHTML='';
}else{
errorFound=false;
document.getElementById(shoppingListArray[a][5]+'BigCourses').innerHTML='$ '+shoppingListArray[a][4]/5*shoppingListArray[a][3];
document.getElementById(shoppingListArray[a][5]+'SmallCourses').innerHTML='$ '+shoppingListArray[a][4]/5*shoppingListArray[a][3];
updateBill();
}

}

function updateCartItemQuantity(a,b,value){
shoppingListArray[a][b]=value;
var quantity=shoppingListArray[a][3];
var teachersEmail=shoppingListArray[a][2];
console.log(teachersEmail=='',!(/^[0-9]+$/).test(quantity)||quantity<1);

var errorMessage='Error';


if(shoppingListArray[a][0]=='Courses'){
if(teachersEmail==''||!(/^[0-9]+$/).test(quantity)||quantity<1){
errorFound=true;
document.getElementById(shoppingListArray[a][5]+'BigCourses').innerHTML=errorMessage;
document.getElementById(shoppingListArray[a][5]+'SmallCourses').innerHTML=errorMessage;
}else{
errorFound=false;
document.getElementById(shoppingListArray[a][5]+'BigCourses').innerHTML='$ '+shoppingListArray[a][4]/5*shoppingListArray[a][3];
document.getElementById(shoppingListArray[a][5]+'SmallCourses').innerHTML='$ '+shoppingListArray[a][4]/5*shoppingListArray[a][3];}
}else{
if(!(/^[0-9]+$/).test(quantity)||quantity<1){
errorFound=true;
document.getElementById(shoppingListArray[a][5]+'Big').innerHTML=errorMessage;
document.getElementById(shoppingListArray[a][5]+'Small').innerHTML=errorMessage;}else{
errorFound=false;
document.getElementById(shoppingListArray[a][5]+'Big').innerHTML='$ '+shoppingListArray[a][4]*shoppingListArray[a][3];
document.getElementById(shoppingListArray[a][5]+'Small').innerHTML='$ '+shoppingListArray[a][4]*shoppingListArray[a][3];}
}


updateBill();
}

function generateCartItemQuantity(){
for(var a=0;a<shoppingListArray.length;a++){
if(shoppingListArray[a][0]=='Courses'){
document.getElementById(shoppingListArray[a][5]+'BigCourses').innerHTML='$ '+shoppingListArray[a][4]/5*shoppingListArray[a][3];
document.getElementById(shoppingListArray[a][5]+'SmallCourses').innerHTML='$ '+shoppingListArray[a][4]/5*shoppingListArray[a][3];
}else{
document.getElementById(shoppingListArray[a][5]+'Big').innerHTML='$ '+shoppingListArray[a][4]*shoppingListArray[a][3];
document.getElementById(shoppingListArray[a][5]+'Small').innerHTML='$ '+shoppingListArray[a][4]*shoppingListArray[a][3];
}
}
if(shoppingListArray.length>0){
updateBill();}
}

function removeItem(index){
var tempArray=[];
shoppingListArray;
var indexCounter=0;
console.log(index);
for(var i=0;i<shoppingListArray.length;i++){
if(i!=index){
tempArray[indexCounter]=shoppingListArray[i];
indexCounter++;}
}
shoppingListArray=tempArray;
numberOfItemsInCart=shoppingListArray.length;
if(numberOfItemsInCart==0){generatePreview();
}else{
generateShoppingList();}
updateBill();
}

function closeProductView(){
document.getElementById('productView').style.display='none';}

function addItemToCart(category,itemToAdd,price,costId){
var cartUpdated=false;

if(category=='Courses'){
if(teachersEmail==''||!(/^[0-9]+$/).test(quantity)||quantity<1){}else{
numberOfItemsInCart++;
shoppingListArray[numberOfItemsInCart-1]=[category,itemToAdd,teachersEmail,quantity,price,(new Date()).getTime(),(price/5*quantity)];
cartUpdated=true;}
}else{
if(!(/^[0-9]+$/).test(quantity)||quantity<1){}else{
numberOfItemsInCart++;
shoppingListArray[numberOfItemsInCart-1]=[category,itemToAdd,teachersEmail,quantity,price,(new Date()).getTime(),(price*quantity)];
cartUpdated=true;}
}

if(cartUpdated){
console.log('updating');
document.getElementById('productView').style.display='none';
document.getElementById('itemCounterBig').innerHTML=numberOfItemsInCart;
document.getElementById('itemCounterSmall').innerHTML=numberOfItemsInCart;
teachersEmail='';
quantity='';
errorFound=false;
updateBill();
}else{
var errorMessage='Error';
errorFound=true;
console.log('in here',costId);
if(category=='Courses'){
document.getElementById(costId+'Courses').innerHTML=errorMessage;}else{
document.getElementById(costId).innerHTML=errorMessage;}
}

}

function updateBill(){
var totalCost=0;
var taxPercent=12;
for(var a=0;a<shoppingListArray.length;a++){
if(shoppingListArray[a][0]=='Courses'){
totalCost=totalCost+shoppingListArray[a][4]/5*shoppingListArray[a][3];
}else{
totalCost=totalCost+shoppingListArray[a][4]*shoppingListArray[a][3];
}
}

sum=(totalCost).toFixed(2);
tax=(totalCost*taxPercent/100).toFixed(2);
total=(totalCost*taxPercent/100+totalCost).toFixed(2);
try{
document.getElementById('sumUiSmall').innerHTML='$ '+sum;
document.getElementById('taxUiSmall').innerHTML='$ '+ tax;
document.getElementById('totalUiSmall').innerHTML='$ '+ total;
document.getElementById('sumUiBig').innerHTML='$ '+sum;
document.getElementById('taxUiBig').innerHTML='$ '+ tax;
document.getElementById('totalUiBig').innerHTML='$ '+ total;

}catch(err){}

console.log(sum,total,tax+'%');
if(window.innerWidth>900){
document.getElementById('paypalButtonSmall').innerHTML='';
document.getElementById('paypalButtonBig').innerHTML="<div id='smart-button-container'><div style='text-align: center;'><div id='paypal-button-container' ></div></div></div>";}else{
document.getElementById('paypalButtonBig').innerHTML='';
document.getElementById('paypalButtonSmall').innerHTML="<div id='smart-button-container'><div style='text-align: center;'><div id='paypal-button-container' ></div></div></div>";
}
document.getElementById('paypal-button-container').innerHTML='';

if(!errorFound){
initPayPalButton();}
console.log(window.innerWidth);
}

function makeSelectedDropDownMenu(a,b,itemToSelect){
return ("<select style='padding:5px 5px;margin:5px;display:inline-block;' onchange='javascript:updateCartItemQuantity("+a+","+b+",this.value)'><option value=''>Class size (# of students)</option><option value='5'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option></select>").replace("value='"+itemToSelect+"'","value='"+itemToSelect+"' selected");
}

  function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"amount":{"currency_code":"USD","value":total}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            console.log('Transaction completed by ' + details.payer.name.given_name + '!');
console.log(shoppingListArray);
 var arrayToSend=[];
console.log('shoppingArraylength',shoppingListArray.length);
for(var i=0;i<shoppingListArray.length;i++){
arrayToSend[i]=shoppingListArray[i].join('^-itemDescription-^');
console.log('arrayToSend',i,shoppingListArray[i]);
console.log('arrayToSend',i);
}


sendDataToGoogleSheets(['itemsBought',arrayToSend.join('^-itemsBought-^')],googleSheetsPortalScript);
console.log(['itemsBought',arrayToSend.join('^*itemsBought*^')]);
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
</script>




</body>
</html>