<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
style
>
body {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10%;
background: rgb(51, 51, 51);
}
.main {
width: 60%;
height: 100%;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px;
background-color: rgb(255, 255, 255);
color: rgb(27, 27, 27);
font-family: montserrat;
font-size: 0.8rem;
}
#submit {
width: 30%;
margin: 20px;
height: 40px;
border-radius: 20px;
background-color: rgb(34, 34, 34);
color: rgb(255, 255, 255);
font-family: montserrat;
font-size: 1rem;
font-weight: bold;
border: none;
cursor: pointer;
}
#submit:hover {
background-color: rgb(0, 98, 5);
color: rgb(0, 0, 0);
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"main"
>
<
h1
>What kind of meal do you prefer?</
h1
>
<
div
class
=
"question"
>
<
label
> <
input
type
=
"radio"
name
=
"meal"
id
=
"veg"
onchange
=
"check()"
>Veg</
label
>
<
label
> <
input
type
=
"radio"
name
=
"meal"
id
=
"nonveg"
onchange
=
"check()"
>
Non-Veg
</
label
>
</
div
>
<
h2
>Veg menu</
h2
>
<
div
class
=
"veg_menu"
>
<
label
> <
input
type
=
"radio"
name
=
"veg_meal"
id
=
"salad"
>Salad</
label
>
<
label
> <
input
type
=
"radio"
name
=
"veg_meal"
id
=
"soup"
>Soup</
label
>
<
label
> <
input
type
=
"radio"
name
=
"veg_meal"
id
=
"dessert"
>Dessert
</
label
>
</
div
>
<
h2
>Non-veg Menu</
h2
>
<
div
class
=
"non-veg_menu"
>
<
label
> <
input
type
=
"radio"
name
=
"non_veg_meal"
id
=
"chicken"
>Chicken</
label
>
<
label
> <
input
type
=
"radio"
name
=
"non_veg_meal"
id
=
"mutton"
>Mutton</
label
>
<
label
> <
input
type
=
"radio"
name
=
"non_veg_meal"
id
=
"fish"
>Fish</
label
>
</
div
>
<
button
id
=
"submit"
onclick
=
"message(),resetMessage()"
>
submit
</
button
>
</
div
>
<
script
>
function check() {
if (document.getElementById('veg').checked) {
document.getElementById('chicken').disabled = true;
document.getElementById('mutton').disabled = true;
document.getElementById('fish').disabled = true;
document.getElementById('salad').disabled = false;
document.getElementById('soup').disabled = false;
document.getElementById('dessert').disabled = false;
}
else if (document.getElementById('nonveg').checked) {
document.getElementById('salad').disabled = true;
document.getElementById('soup').disabled = true;
document.getElementById('dessert').disabled = true;
document.getElementById('chicken').disabled = false;
document.getElementById('mutton').disabled = false;
document.getElementById('fish').disabled = false;
}
}
function message() {
if (document.getElementById('veg').checked) {
if (document.getElementById('salad').checked) {
alert("You have selected Salad");
}
else if (document.getElementById('soup').checked) {
alert("You have selected Soup");
}
else if (document.getElementById('dessert').checked) {
alert("You have selected Dessert");
}
else {
alert("Please select a meal");
}
}
else if (document.getElementById('nonveg').checked) {
if (document.getElementById('chicken').checked) {
alert("You have selected Chicken");
}
else if (document.getElementById('mutton').checked) {
alert("You have selected Mutton");
}
else if (document.getElementById('fish').checked) {
alert("You have selected Fish");
}
else {
alert("Please select a meal");
}
}
else {
alert("Please select a meal");
}
}
</
script
>
</
body
>
</
html
>