Solution:
<html>
<head>
<title>
MNM Recipe Book
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>
var app = angular.module("ngifApp",[])
app.controller("ngifctrl",function($scope)
{
$scope.Aitems=['Indian Cuisine','Italian','Chinese Cuisine'];
$scope.Aselected=['Indian Cuisine','Italian','Chinese Cuisine'];
$scope.A1items=['Konkani cuisine','Kathiawadi cuisine','Sindhi cuisine'];
$scope.A1selected=['Konkani cuisine','Kathiawadi cuisine','Sindhi cuisine'];
$scope.A2items=['Bruschetta','Margherita Pizza','Pasta Con Pomodoro E Basilico'];
$scope.A2selected=['Bruschetta','Margherita Pizza','Pasta Con Pomodoro E Basilico'];
$scope.A3items=['Dim Sums','Spring Rolls','Honey Chilli Potato'];
$scope.A4selected=['Dim Sums','Spring Rolls','Honey Chilli Potato'];
$scope.isvisible = false;
$scope.show = function(){
$scope.isvisible = $scope.isvisible ? false : true;
};
});
</script>
<style>
.name{
position:absolute;
top:0%;
left:30%;
font-size:50px;
}
.text{
position:absolute;
top:22%;
left:40%;
font-size:23px;
}
.text2{
position:absolute;
top:40%;
left:40%;
font-size:23px;
}
.recipe{
position:absolute;
font-size:23px;
}
</style>
</head>
<body style="background-color:rgb(113, 138, 161); align:center" ng-app="ngifApp" >
<div class="name">
<h2 style="font-family:Arial;color:black"><u><b>Chef Recipe Book</u></b><br>
</div>
<hr>
<br>
<div class="text">
<h2 style="font-family:Arial;color:black"><b>List of cuisines :- </b><br>
</div>
<div class="text2">
<div ng-controller="ngifctrl">
Select the cuisine : <select ng-model="Aselected" ng-options="item for item in Aitems" >
</select><br><br>
<div ng-if="Aselected=='Indian Cuisine'">
Select the Dish : <select ng-model="A1selected" ng-options="item for item in A1items" >
</select><br><br>
<div class="recipe" ng-if="A1selected=='Konkani cuisine'">
<b>You have Selected Konkani cuisine.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
The Konkan regions of Goa and Maharashtra bring to us some hot,
spicy and sour delicacies like Kokum, Tirphal (green Sinchuan pepper),
Tepla ambat (fish curry), Kolmbo sambar with Kadamb (idli-like), etc.
This cuisine is still not widely savoured by people outside of the Konkan region.
</p>
</div>
<div class="recipe" ng-if="A1selected=='Kathiawadi cuisine'">
<b>You have Selected Kathiawadi cuisine.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
Unlike the infamous sweet Gujarati food, the Kathiawadi region of Gujarat
offers spicy food cooked on a wood-fire. Some distinct food items being
served here are Khichdi, Lasaniya batata (potato) cooked with chillies
and garlic, sev tamatar sabzi (tomato curry topped with sev) with bhakri
bread and Dakor na gota fritters made of fenugreek leaves and gram flour.
</p>
</div>
<div class="recipe" ng-if="A1selected=='Sindhi cuisine'">
<b>You have Selected Sindhi cuisine.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
You just cannot miss out on their most famous kadi-khichadi which should
definitely be on every foodie's bucketlist apart from that Sindhi Cuisine
consists of hearty dishes like Dal Pakwan, Koki Papad, Seyun Patata,
Chaap-Chola and Saibhaji. A typical Sindhi meal is not that spicy, and
is usually made of wheat bread, rice along with dry and gravy dishes.
</p>
</div>
</div>
<div ng-if="Aselected=='Italian'">
Select the Dish : <select ng-model="A2selected" ng-options="item for item in A2items" >
</select><br><br>
<div class="recipe" ng-if="A2selected=='Bruschetta'">
<b>You have Selected Bruschetta.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
An antipasto dish, bruschetta has grilled bread topped with veggies,
rubbed garlic and tomato mix. A country bread sliced and topped with
different toppings - the evergreen tomato-basil and an inventive
mushroom-garlic. The classic Italian starter!
</p>
</div>
<div class="recipe" ng-if="A2selected=='Margherita Pizza'">
<b>You have Selected Margherita Pizza.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
Fancy a pipping hot pizza, fresh out of the oven? Create one at home!
Margherita Pizza is to many the true Italian flag. One of the most
loved Italian dishes, it just takes a few simple ingredients and
you get insanely delicious results! You just can't go wrong with
that tomato, basil and fresh mozzarella combo.
</p>
</div>
<div class="recipe" ng-if="A2selected=='Pasta Con Pomodoro E Basilico'">
<b>You have Selected Pasta Con Pomodoro E Basilico.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
This is the most basic and simplest cooked pasta sauce, hence it
is the benchmark of a good Italian home cook. This one boats of
being among the original Italian recipes of pasta. easy and quick,
this pasta recipe can be made under half an hour. Serve as a
breakfast, pack for kid's tiffin or savour as an evening snack.
You can even cook this for a casual and lazy dinner and pair
this up with red wine.
</p>
</div>
</div>
<div ng-if="Aselected=='Chinese Cuisine'">
Select the Dish : <select ng-model="A3selected" ng-options="item for item in A3items" >
</select><br><br>
<div class="recipe" ng-if="A3selected=='Dim Sums'">
<b>You have Selected Dim Sums.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
One of the most loves street food from the north east, widely popular
across northern India now comes to your kitchen! Small bite-sized
rounds stuffed with veggies or meat. Dimsums are perfect steamed
snack to delight those evening cravings.
</p>
</div>
<div class="recipe" ng-if="A3selected=='Spring Rolls'">
<b>You have Selected Spring Rolls.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
A crisp appetizer where shredded veggies are encased in thin sheets
and then fried golden. Little munchies to prepare at home for a
high tea menu or just a party starter, serve with a tangy dip.
</p>
</div>
<div class="recipe" ng-if="A3selected=='Honey Chilli Potato'">
<b>You have Selected Honey Chilli Potato.</b><br><br>
<input type="button" value="Show Recipe" ng-click="show()">
<p ng-show="isvisible">
The quintessential Indo-Chinese snack! Honey chilli potato is
what you'll find at every Chinese van in and around north India.
It has the perfect balance of sweet and spicy with sliced potatoes
tossed with a host of sauces and spices.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
0 Comments