Hello everyone , Today in my blog with the help of an example i.e cake form I have illustrated the use of array, if and else statement and JavaScript functions .
Basically the form helps in calculating the price of the cake depending on the user interest by clicking on their desired taste.
In my example , I have created 2 boxes i.e the content order and the contact details.
The first box has list of size of cakes as radio buttons . I have also applied an On Click event which will help in calculating the total price.
Within this box I have also made a dropdown list comprising of various options in it.
I have also added a checkbox button for the candle and the insciption block . To this I have applied an On Click event for calculating the total price.
To the next box has contact details that includes the name , address and the phone-no.
Below is the html code :-
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Cake Form</title>
<!-- Fonts css file -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,600italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="cakeform" onsubmit="return true;">
<div>
<div class="cont_order">
<fieldset>
<legend>Make your cake!</legend>
<label >Size Of the Cake</label>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal()" />Round cake 6" - serves 8 people ($20)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()" />Round cake 8" - serves 12 people ($25)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()" />Round cake 10" - serves 16 people($35)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()" />Round cake 12" - serves 30 people($75)</label><br/>
<br/>
<label >Filling</label>
<select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
<option value="Pineapple">Pineapple($5)</option>
<option value="Dobash">Dobash($9)</option>
<option value="Mint">Mint($5)</option>
<option value="Cherry">Cherry($5)</option>
<option value="Apricot">Apricot($8)</option>
<option value="Buttercream">Buttercream($7)</option>
<option value="Chocolate Mousse">Chocolate Mousse($12)</option>
</select>
<br/>
<p>
<label for='includecandles' class="inlinelabel">Include Candles($5)</label>
<input type="checkbox" id="includecandles" name='includecandles' onclick="calculateTotal()" />
</p>
<p>
<label class="inlinelabel" for='includeinscription'>Include Inscription($20)</label>
<input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" />
<input type="text" id="theinscription" name="theinscription" value="Enter Inscription" />
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
<div class="cont_details">
<fieldset>
<legend>Contact Details</legend>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div><!--End of wrap-->
</body>
</html>
I have styled the cake form using the various CSS properties.
Below is the CSS code for the form:-
#wrap{
width:400px;
margin:0 auto;
text-align:left;
margin-top:8px;
padding:5px;
background:#fff;
font-family:AvenirLTStd, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:16px;
}
#wrap .cont_details fieldset,.cont_order fieldset{
margin:10px;
padding:20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#wrap legend{
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
font-style:italic;
padding-bottom:10px;
}
#wrap .cont_details input{
margin-bottom:10px;
color:#000;
}
#wrap .input1:hover,.input1:active{
}
#wrap label{
display:block;
font-size:12px;
color:#000;
font-weight:bold;
}
#wrap label.inlinelabel
{
display:inline;
}
#wrap .cont_order input{
margin-bottom:5px;
}
#wrap .cont_order p{
padding-top:5px;
}
#wrap input[type="radio"]
{
margin-top:8px;
margin-bottom:8px;
}
#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}
#wrap input#submit
{
margin:10px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
#wrap div#totalPrice
{
padding:10px;
font-weight:bold;
background-color:#ff0;
}
#wrap label.radiolabel
{
font-weight:normal;
display:inline;
}
I have applied JavaScript over the form for calculating the total price.
For this I need to create 2 arrays and have assigned the values to them.
Now for finding the price based on the size of the cake we need to create a function as getCakeSizePrice, where the user selects the desired option from the radio buttons.
Now we will create a function for finding the filling price which is based on the dropdown selection which would help to get the desired value which is been selected.
Now we need to create a function for finding the price of the candles which is based on the checkbox button selection as selected by the user when checked.
I have also created a function for finding the insciption price which when selected by the user , will assign the value else not.
Now for calculating the total price we need to add all 4 created function i.e the getCakePriceSize( ) + getFillingPrice( ) +candlesPrice( ) + inspirationPrice( ) ;
The total price will be displayed in block when selected by the user.
On refreshing the page the total price will display to none.
Below is the JavaScript code for the above example :-
//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var cake_prices = new Array();
cake_prices["Round6"]=20;
cake_prices["Round8"]=25;
cake_prices["Round10"]=35;
cake_prices["Round12"]=75;
//Set up an associative array
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
filling_prices["Pineapple"]=5;
filling_prices["Dobash"]=9;
filling_prices["Mint"]=5;
filling_prices["Cherry"]=5;
filling_prices["Apricot"]=8;
filling_prices["Buttercream"]=7;
filling_prices["Chocolate Mousse"]=12;
// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCakeSizePrice()
{
var cakeSizePrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the cake the user Chooses name=selectedCake":
var selectedCake = theForm.elements["selectedcake"];
//Here since there are 4 radio buttons selectedCake.length = 4
//We loop through each radio buttons
for(var i = 0; i < selectedCake.length; i++)
{
//if the radio button is checked
if(selectedCake[i].checked)
{
//we set cakeSizePrice to the value of the selected radio button
//i.e. if the user choose the 8" cake we set it to 25
//by using the cake_prices array
//We get the selected Items value
//For example cake_prices["Round8".value]"
cakeSizePrice = cake_prices[selectedCake[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cakeSizePrice
return cakeSizePrice;
}
//This function finds the filling price based on the
//drop down selection
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
//candlesPrice() finds the candles price based on a check box selection
function candlesPrice()
{
var candlePrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includecandles"
var includeCandles = theForm.elements["includecandles"];
//If they checked the box set candlePrice to 5
if(includeCandles.checked==true)
{
candlePrice=5;
}
//finally we return the candlePrice
return candlePrice;
}
function insciptionPrice()
{
//This local variable will be used to decide whether or not to charge for the inscription
//If the user checked the box this value will be 20
//otherwise it will remain at 0
var inscriptionPrice=0;
//Get a refernce to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includeinscription"
var includeInscription = theForm.elements["includeinscription"];
//If they checked the box set inscriptionPrice to 20
if(includeInscription.checked==true){
inscriptionPrice=20;
}
//finally we return the inscriptionPrice
return inscriptionPrice;
}
function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
Conclusion :-
Hence, with the help of the above example , we get an overview of JavaScript fundamentals using array, if-else statement and various functions.
0 Comment(s)