Nerajno/gist:70a4d3b6858c28ed898f0ace90d3f832

## gistfile1.txt
<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>
	<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>