Skip to content

Instantly share code, notes, and snippets.

@lfernandez55

lfernandez55/index.html

Created October 15, 2018 14:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lfernandez55/028cb8778758ccec643d8f895ba997c6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lfernandez55/028cb8778758ccec643d8f895ba997c6 to your computer and use it in GitHub Desktop.
Download ZIP
Costellos Pasta and Pizza Costello's Pizza // source https://jsbin.com/yenaxem
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Costello's Pizza">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Costellos Pasta and Pizza</title>
<script defer language="JavaScript" type="text/javascript" src="costello.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="costello.css" >
<style id="jsbin-css">
.col-md-12{
text-align: center;
font-size: 3em;
background-color: red;
}
.msg{
text-align:center;
font-size: 1.3em;
color: red;
}
.row{
margin-top: 10px;
border: 5px solid white;
background-color: silver;
padding: 10px;
}
.label{
text-align:center;
vertical-align:top;
}
#submitMessage{
transition: opacity 10s;
}
#cancel{
text-decoration: underline;
}
</style>
</head>
<body>
<form name="myForm" action="https://mangrove-hippopotamus.glitch.me/order" id="myForm" method="POST" onsubmit="return calculateOrder(this)">
<div class="container">
<div class="row">
<div class="col-md-12" id="debug">Costello's Online Orders</div>
</div>
<div class="row">
<div class="col-md-4 label">Pasta Bowl</div>
<div class="col-md-4" > (basic price: $7.50)</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Pasta</div>
<div class="col-md-4" >
<div><input type="radio" name="pastatype" value="0" />Spaghetti (no extra cost)</div>
<div><input type="radio" name="pastatype" value="50" />Fettucine (add 50 cents)</div>
<div><input type="radio" name="pastatype" value="75" />Fusilli (add 75 cents)</div>
</div>
<div class="col-md-4 msg" id="radioLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label">Sauce</div>
<div class="col-md-4" >
<select name="sauce" >
<option value="0">Pomodoro (no extra cost)</option>
<option value="50">Bolognese (add 50 cents)</option>
<option value="100">Alfredo (add $1.00)</option>
</select>
</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Extras</div>
<div class="col-md-4" >
<div><input type="checkbox" name="extras" value="200" />Side salad (add $2.00)</div>
<div><input type="checkbox" name="extras" value="100" />Bread sticks (add $1.00)</div>
</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Name</div>
<div class="col-md-4" ><input type="text" id="name" name="client_name" /></div>
<div class="col-md-4 msg" id="nameLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label">Phone</div>
<div class="col-md-4" ><input type="text" id="phone" value="" /></div>
<div class="col-md-4 msg" id="phoneLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label"><input type="submit" value="Order"/></div>
<div class="col-md-4" id="totalcost"></div>
<div class="col-md-4 msg" id="submitMessage"></div>
</div>
</div>
</form>
<script id="jsbin-javascript">
//use 'tostring' method to turn it into a whole number and add decimal
//https://developer.mozilla.org/en-US/docs/Web/JavaScript
function calculateOrder(){
var pastaTypePrice = document.getElementsByName('pastatype');
for(var i = 0; i < pastaTypePrice.length; i++){
var pastaVal = parseInt(pastaTypePrice[i].value);
if(pastaTypePrice[i].checked == true){
console.log("Pasta: " + pastaVal);
}
}
var sauceTypePrice = document.getElementsByName('sauce');
for(var n = 0; n < sauceTypePrice.length; n++){
var sauceVal = parseInt(sauceTypePrice[n].value);
if(sauceTypePrice[n].checked == true){
console.log("Sauce: " + sauceVal);
}
}
//Tried reading sauce by professor example
//var sauceVal = document.getElementsByName('sauce');
// console.log(sauceVal.length);
// console.log(parseInt(sauceVal[0].value));
var extrasPrice = document.getElementsByName('extras');
for(var m = 0; m < extrasPrice.length; m++){
var extrasVal = parseInt(extrasPrice[m].value);
if(extrasPrice[m].checked == true){
console.log("Extras: " + extrasVal);
}
}
var basePrice = 750;
console.log(basePrice);
var addOns = pastaVal + sauceVal + extrasVal;
console.log("Add On Total: " + addOns);
var orderTotal = basePrice + addOns;
console.log("Order Total " + "$" + orderTotal);
return false;
}
</script>
<script id="jsbin-source-html" type="text/html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Costello's Pizza">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Costellos Pasta and Pizza</title>
<script defer language="JavaScript" type="text/javascript" src="costello.js"><\/script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="costello.css" >
</head>
<body>
<form name="myForm" action="https://mangrove-hippopotamus.glitch.me/order" id="myForm" method="POST" onsubmit="return calculateOrder(this)">
<div class="container">
<div class="row">
<div class="col-md-12" id="debug">Costello's Online Orders</div>
</div>
<div class="row">
<div class="col-md-4 label">Pasta Bowl</div>
<div class="col-md-4" > (basic price: $7.50)</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Pasta</div>
<div class="col-md-4" >
<div><input type="radio" name="pastatype" value="0" />Spaghetti (no extra cost)</div>
<div><input type="radio" name="pastatype" value="50" />Fettucine (add 50 cents)</div>
<div><input type="radio" name="pastatype" value="75" />Fusilli (add 75 cents)</div>
</div>
<div class="col-md-4 msg" id="radioLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label">Sauce</div>
<div class="col-md-4" >
<select name="sauce" >
<option value="0">Pomodoro (no extra cost)</option>
<option value="50">Bolognese (add 50 cents)</option>
<option value="100">Alfredo (add $1.00)</option>
</select>
</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Extras</div>
<div class="col-md-4" >
<div><input type="checkbox" name="extras" value="200" />Side salad (add $2.00)</div>
<div><input type="checkbox" name="extras" value="100" />Bread sticks (add $1.00)</div>
</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Name</div>
<div class="col-md-4" ><input type="text" id="name" name="client_name" /></div>
<div class="col-md-4 msg" id="nameLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label">Phone</div>
<div class="col-md-4" ><input type="text" id="phone" value="" /></div>
<div class="col-md-4 msg" id="phoneLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label"><input type="submit" value="Order"/></div>
<div class="col-md-4" id="totalcost"></div>
<div class="col-md-4 msg" id="submitMessage"></div>
</div>
</div>
</form>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">
.col-md-12{
text-align: center;
font-size: 3em;
background-color: red;
}
.msg{
text-align:center;
font-size: 1.3em;
color: red;
}
.row{
margin-top: 10px;
border: 5px solid white;
background-color: silver;
padding: 10px;
}
.label{
text-align:center;
vertical-align:top;
}
#submitMessage{
transition: opacity 10s;
}
#cancel{
text-decoration: underline;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//use 'tostring' method to turn it into a whole number and add decimal
//https://developer.mozilla.org/en-US/docs/Web/JavaScript
function calculateOrder(){
var pastaTypePrice = document.getElementsByName('pastatype');
for(var i = 0; i < pastaTypePrice.length; i++){
var pastaVal = parseInt(pastaTypePrice[i].value);
if(pastaTypePrice[i].checked == true){
console.log("Pasta: " + pastaVal);
}
}
var sauceTypePrice = document.getElementsByName('sauce');
for(var n = 0; n < sauceTypePrice.length; n++){
var sauceVal = parseInt(sauceTypePrice[n].value);
if(sauceTypePrice[n].checked == true){
console.log("Sauce: " + sauceVal);
}
}
//Tried reading sauce by professor example
//var sauceVal = document.getElementsByName('sauce');
// console.log(sauceVal.length);
// console.log(parseInt(sauceVal[0].value));
var extrasPrice = document.getElementsByName('extras');
for(var m = 0; m < extrasPrice.length; m++){
var extrasVal = parseInt(extrasPrice[m].value);
if(extrasPrice[m].checked == true){
console.log("Extras: " + extrasVal);
}
}
var basePrice = 750;
console.log(basePrice);
var addOns = pastaVal + sauceVal + extrasVal;
console.log("Add On Total: " + addOns);
var orderTotal = basePrice + addOns;
console.log("Order Total " + "$" + orderTotal);
return false;
}
</script></body>
</html>
Raw
jsbin.yenaxem.css
.col-md-12{
text-align: center;
font-size: 3em;
background-color: red;
}
.msg{
text-align:center;
font-size: 1.3em;
color: red;
}
.row{
margin-top: 10px;
border: 5px solid white;
background-color: silver;
padding: 10px;
}
.label{
text-align:center;
vertical-align:top;
}
#submitMessage{
transition: opacity 10s;
}
#cancel{
text-decoration: underline;
}
Raw
jsbin.yenaxem.js
//use 'tostring' method to turn it into a whole number and add decimal
//https://developer.mozilla.org/en-US/docs/Web/JavaScript
function calculateOrder(){
var pastaTypePrice = document.getElementsByName('pastatype');
for(var i = 0; i < pastaTypePrice.length; i++){
var pastaVal = parseInt(pastaTypePrice[i].value);
if(pastaTypePrice[i].checked == true){
console.log("Pasta: " + pastaVal);
}
}
var sauceTypePrice = document.getElementsByName('sauce');
for(var n = 0; n < sauceTypePrice.length; n++){
var sauceVal = parseInt(sauceTypePrice[n].value);
if(sauceTypePrice[n].checked == true){
console.log("Sauce: " + sauceVal);
}
}
//Tried reading sauce by professor example
//var sauceVal = document.getElementsByName('sauce');
// console.log(sauceVal.length);
// console.log(parseInt(sauceVal[0].value));
var extrasPrice = document.getElementsByName('extras');
for(var m = 0; m < extrasPrice.length; m++){
var extrasVal = parseInt(extrasPrice[m].value);
if(extrasPrice[m].checked == true){
console.log("Extras: " + extrasVal);
}
}
var basePrice = 750;
console.log(basePrice);
var addOns = pastaVal + sauceVal + extrasVal;
console.log("Add On Total: " + addOns);
var orderTotal = basePrice + addOns;
console.log("Order Total " + "$" + orderTotal);
return false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment