<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Online Food Delivery Form </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css">
<link href="custom.css" rel="stylesheet" type="text/css">
<script>
function finalCost(){
var foodItem = document.getElementById("food_item").value;
var specialItemm = document.getElementById("special_item").value;
var foodQuatity = document.getElementById("food_quantity").value;
var deliveryType = document.getElementById("delivery_type").value;
var deliveryArea = document.getElementById("delivery_area").value;
var all_food = (parseInt(foodItem)*7) + (parseInt(specialItemm)*3) + ((foodQuatity)*2) + (parseInt(deliveryType)*4) + (parseInt(deliveryArea)*3)
document.getElementById("result").innerHTML = all_food;
}
function ok_result(){
document.getElementById("okResult").style.display="block";
document.getElementById("okResult").style.backgroundColor="#DCE775";
document.getElementById("input_box").style.display="none";
}
</script>
</head>
<body>
<div class="online_food_delivery_box animated bounceInDown" id="input_box">
<h3> Online Food Delivery Form </h3><br>
