Directory
Chapter 1: Basics
Chapter 2: Editing The Code
Chapter 3: How The Site Works
Chapter 4: How To Add And Remove Items
Chapter 5: Futher
Chapter 1:
sub Chapter: ACCESSING THE CODE TO THE WEBSITE
"
All the code is viewable publicly on this url
Files are put in their related directories here is a list
Main: Link To Main Code
Scripts: Link To Scripts
Images: Link To Images
CSS (This is what styles the website) has two directories
CSS 1: Link To CSS 1
CSS 2: Link To CSS 2
Menu: Link To Menu
Orders: Link To Order Sheet
"
Sub Chapter: CODE EXPLAINED JAVASCRIPT
All of the scripts will be explained in the following order.
To understand some of these scripts check the documentation for the following github repos I have included in them.
Store.js : Store.js - This is used to save orders and restore them
dwyl: dwyl - this is what sends the form data to a google spreadsheet
Terry: Terry - this is used to update the menu.
Pure CSS: Pure CSS - This is used to style the sites.
Available.js This determines if an item should be avaible to order based off of the menu (linked above)
if an item has been unchecked then it will not be there to order this script is what handles that it also handles
whether saved items should be included for example if you were to save an order with say Chez itz but that item was
out then when you restored it would not restore the chez itz that relies on Store.js if there is a problem with it restoring
things that are not available then read up on store.js.IPBLOCK.js - this is a simple script that handles the collecting and blocking of ips to block an ip copy it from the
spreadsheet and paste it into this var BlackList = ['50.100.86.180','104.249.229','226,99.226.9.0','138.197.162.186']
line of code inside IPBLOCK.js make sure to contain it inside two '' and if adding more than one seperate then with a ,Opentime.js - This determines if it's time for the orders to be open or closed. The value 0 and value 6 in
if (days == 0 || days == 6) make sure it is not open on saturday and sunday.OpenTimeIndex.js - This determines what the site will display or how long until the orders open or close.
Option.js - this displays options like what type of smoothie you're selecting based off of what drink is
selected it also decides if the snacks should be displayed.Save.js - This is what handles the saving of orders to someones device using the Store.js it also handles the
restoring.SlidingGallery.js - This handles the gallery of images from the index.html
Total.js - This is the most important script it handles the total as it says but also returns the values for
the snacks and determines what text should be put into the toppings.Version L - Version N - Version J - Are all not that important all they do is add a script when the page loads
this stops the browser from caching it.Code Explained Continued HTML
order.html
This is a seeemingly simple page but contains so much more behind the scenes
Whitin it there are fieldsset elements as shown below
<fieldset class="pure-group" style="border:black double 8px; border-radius: 15px; background-color:white;">
<label for="Type">Type Of Drink:</label><br>
<select id="Type" name="Type" onchange="change()">
<option value="None">None</option>
<option id="T1" value="Smoothie">Smoothie</option>
<option id="T2" value="Hot Chocolate">Hot Chocolate</option>
<option id="T3" value="Hot Caramel">Hot Caramel</option>
<option id="T4" value="Hot Vanilla">Hot Vanilla</option>
<option id="T5" value="Iced Vanilla">Iced Vanilla</option>
<option id="T6" value="Iced Caramel">Iced Caramel</option>
<option value="Special Request">Special Request</option>
</select>
</fieldset>The Ids are extremely important almost all of the fieldset elements will contain things will an ID
for example
<table>
<tr><th>
<select id="AQ" >
<option value="0">0</option>
<option value="1 Ice Breaker">1</option>
<option value="2 Ice Breaker">2</option>
<option value="3 Ice Breaker">3</option>
<option value="4 Ice Breaker">4</option>
<option value="5 Ice Breaker">5</option>
</select>
</th><th>
<li><p>Ice Breaker</p><br></li>
</th></tr>
</table>Look at the id AQ this is extremely important because it is used to determine the value
of the options with the following code
AAQ = document.getElementById("AQ").value
You could determine what value is currently selected this is used quite a bit in my code
The values are incremented so AQ Means
A - the first letter of the alphabet for the first variable
Q - meaning quantity
The next item is named BQ and then CQ and so on.
<fieldset class="pure-group" style="border:black; display:none; double 8px; border-radius: 15px; background-color:white;">
<label for="Extra">Extra:</label><br>
<input required id="ExtraSelect" class="pure-input-rounded" name="Extra" />
</fieldset>You will also find things like this take note of the display:none; trait
this is not viewable to the user what it does is collects the values of the selected
extras and sends them to the form. The reason it does not return a 0 when <option value="0">0</option>
is selected is because I programed it to remove all zeros upon submitting the data so before it is submitted it
looks like this
" 0 0 0 0 0 0 3 Ice Breaker 0 0 0 0"
Diving Deeper into the HTML
<script type="text/javascript">
var sp = null;
function doData(json) {
spData = json.feed.entry;
}
function drawCell(tr, val) {
var td = $("<td/>");
tr.append(td);
td.append(val);
return td;
}
function drawRow(table, rowData) {
if (rowData == null) return null;
if (rowData.length == 0) return null;
var tr = $("<tr/>");
table.append(tr);
for(var c=0; c<rowData.length; c++) {
drawCell(tr, rowData[c]);
}
return tr;
}
function drawTable(parent) {
var table = $("<table/>");
parent.append(table);
//console.log(table);
return table;
}
function readData(parent) {
var data = spData;
var table = drawTable(parent);
var rowData = [];
for(var r=0; r<data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
if (cell.col == 1) {
drawRow(table, rowData);
rowData = [];
}
rowData.push(val);
}
drawRow(table, rowData);
}
$(document).ready(function(){
readData($("#data"));
});
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1Kw5zOykQSqxmKmMejRHC8fShLeCLsHjzXt6AnFJTHoc/1/public/values?alt=json-in-script&callback=doData"></script>This script puts a table of the menu which the user cannot see. The Save.js script uses this table to determine if an item is able to be sold or not
Sub Chapter: TROUBLESHOOTING (SITE IS UNREACHABLE)
For those of you who have never used github or do not understand how the site is hosted.
It uses a simple redirection from godaddy.com if anything were to go wrong and the site is unreachable check
godaddy.com first visit this url once you have logged into the account please email me for the login
if I have graduated or am unable to do this myself. Once logged in please check this
URL
It should return the following values.
Type Name Value TTL Actions
A @ 185.199.108.153 600 seconds
A @ 185.199.109.153 600 seconds
A @ 185.199.110.153 600 seconds
A @ 185.199.111.153 600 seconds
CNAME www @ 1 Hour
CNAME _domainconnect _domainconnect.gd.domaincontrol.com 1 Hour
NS @ ns03.domaincontrol.com 1 Hour
NS @ ns04.domaincontrol.com 1 Hour
SOA @ Primary nameserver: ns03.domaincontrol.com. 1 HourIf the url provided in this document does not contain those values for some reason
add or edit the current values to match that which should fix any errors with the website
being unable to be reached. If that still does not fix the error visit this site if you are
a contributor to the github project or if you are logged into my account and check this URL
Under custom domain it should read www.spiritspotcafe.com and the save button should be unclickable
if it does not say www.spiritspotcafe.com or is clickable please change the custom domain
to something unrelated and hit save them wait 30 seconds and change it to www.spiritspotcafe.com hit save again
Github has a delay of up 30 seconds to a minute when it is updating the code to websites or settings.
