Created
December 12, 2018 06:25
-
-
Save Nerajno/70a4d3b6858c28ed898f0ace90d3f832 to your computer and use it in GitHub Desktop.
Extra work ==> Jquery 301
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Car ordering form</title> | |
</head> | |
<body> | |
<!-- Make an order form for a car | |
Let's start with the model and the color | |
When they select the model and the color | |
it will tell them what the price of the car is | |
maybe it's like 3-series 36000, 5-series 46000 | |
black is 10% more expensive --> | |
<form id="carOrder" action="submit.php"> | |
<h3>Car Ordering Form </h3> | |
Select a brand : | |
<input type="radio" name="brand" value="Nissan" id="make"> | |
<label>Nissan</label> | |
<input type="radio" name="brand" value="BMW" id="make"> | |
<label>BMW</label> | |
<input type="radio" name="brand" value="Toyota" id="make"> | |
<label>Toyota</label> | |
<br> | |
Select a body style: | |
<select name="bodyType" id="carBodyType"> | |
<option value="noCar"></option> | |
<option value="Sedan">Sedan</option> | |
<option value="Wagon">Wagon</option> | |
<option value="Hatchback">Hatchback</option> | |
<option value="Convertible">Convertible</option> | |
</select> | |
<br> | |
Select a color : | |
<input type="radio" name="color" value="red" id="carColor"> | |
<label>Red</label> | |
<input type="radio" name="color" value="black" id="carColor"> | |
<label>Black</label> | |
<input type="radio" name="color" value="white" id="carColor"> | |
<label>White</label> | |
<br> | |
Select extra options : | |
<input type="checkbox" name="premium"> | |
<label> <=Premium Tires</label> | |
<input type="checkbox" name="sunRoof"> | |
<label> <=Sun Roof</label> | |
<input type="checkbox" name="entertainmentSystem"> | |
<label> <=Entertainment System</label> | |
<br> | |
<button id="calculateCost">Submit</button> | |
</form> | |
<p id='finalCost'>Total Cost : </p> | |
<script src="http://code.jquery.com/jquery.min.js"></script> | |
<script> | |
// total car cost = 0' | |
//PLACE A CLICK EVENT ON EACH BUTTON | |
//each car is 10000 except bmw === 15000 | |
// all body style except a convertable is a 1000, cnvrtble = 1200 | |
// colors is a 1000, black = 1100 | |
// each extra slection = 700 | |
// Log other input to car manufacturer | |
$("#carOrder").on('submit', function(event){ | |
event.preventDefault(); | |
let carCost = 0; | |
let carBrand = $("[name=brand]:checked").val(); | |
let carStyle = $("[name=bodyType]").val(); | |
let carColour = $("[name=color]:checked").val(); | |
let extraOptions1 = $("[name=premium]").prop("checked"); | |
let extraOptions2 = $("[name=sunRoof]").prop("checked"); | |
let extraOptions3 = $("[name= entertainmentSystem]").prop("checked"); | |
// add cost based on car brand | |
if(carBrand ==="BMW"){ | |
carCost = carCost + 15000; | |
}else{ | |
carCost = carCost+10000; | |
} | |
// add cost based on body style | |
if(carStyle === "Convertible"){ | |
carCost = carCost + 1200; | |
}else{ | |
carCost = carCost + 1000; | |
} | |
// add cost based on color choosen | |
if(carColour ==="black"){ | |
carCost = carCost + 1100; | |
}else{ | |
carCost = carCost+1000; | |
} | |
// checking extraOption1 | |
if(extraOptions1){ | |
carCost += 1000; | |
} | |
// checking extraOption2 | |
if(extraOptions2){ | |
carCost += 1000; | |
} | |
// checking extraOption3 | |
if(extraOptions3){ | |
carCost += 1000; | |
} | |
$("#finalCost").html("The cost of your "+carBrand+" is $"+carCost); | |
console.log(carCost); | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Zen Moment