This source code implements a few additional features created with JavaScript which are not displayed in the blog.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:white;
}
h1
{
font-family:"Calibri";
color:#660000;
text-align:center;
}
th
{
background-color:#ffcc33;
color:#330000;
}
p, li
{
font-family:"Arial";
font-size:18px;
margin-left:20px;
margin-bottom:10px;
}
table,th,td
{
border:2px solid black;
border-collapse:collapse;
font-size:18px;
font-family:"Arial";
padding:4px;
margin:20px;
}
#id1
{
height:34px;
width:960px;
font-family:"Calibri";
font-size:24px;
background-color:#660000;
color:#ffcc33;
margin:20px;
}
.auto-style1 {
text-align: center;
}
button
{
margin:20px;
}
.auto-style2 {
text-align: left;
margin-left:20px
}
.auto-style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
</style>
<title> Vegetable Fried Rice Recipe </title>
</head>
<body>
<h1 class="auto-style2"> Vegetable Fried Rice Recipe </h1>
<p> A delicious recipe that makes your mouth water! </p>
<p>
<img src="vegetable-fried-rice.jpg" alt="Vegetable Fried Rice">
</p>
<p>Serves: 4 <br> Cooking time: 45 minutes</p>
<div id="id1" class="">
Ingredients
</div>
<p>
<table>
<tr>
<th>Ingredient</th>
<th>Quantity</th>
</tr>
<tr>
<td>Basmati rice</td>
<td class="auto-style1">500g</td>
</tr>
<tr>
<td>Chopped cabbage</td>
<td class="auto-style1">200g</td>
</tr>
<tr>
<td>Finely chopped carrots</td>
<td class="auto-style1">200g</td>
</tr>
<tr>
<td>Spring onions</td>
<td class="auto-style1">2</td>
</tr>
<tr>
<td>Peas</td>
<td class="auto-style1">300g</td>
</tr>
<tr>
<td>Coriander leaves</td>
<td class="auto-style1">4 stalks</td>
</tr>
<tr>
<td>Capsicum</td>
<td class="auto-style1">2</td>
</tr>
<tr>
<td>Soya sauce</td>
<td class="auto-style1">4 teaspoons</td>
</tr>
<tr>
<td>Vinegar</td>
<td class="auto-style1">4 teaspoons</td>
</tr>
<tr>
<td>Oil</td>
<td class="auto-style1">5 teaspoons</td>
</tr>
<tr>
<td>Salt</td>
<td class="auto-style1">To taste</td>
</tr>
</table>
</p>
<div id="id1" class="">
Method
</div>
<ol>
<li>Boil rice in a pan for 20 minutes. Drain and cool on a plate.</li>
<li>Heat oil in a wok and stir-fry the vegetables.</li>
<li>Add spring onions and fry until golden-brown.</li>
<li>Add vinegar and soya sauce.</li>
<li>Mix well with the rice. Add sauces and salt to taste.</li>
<li>Heat in a microwave or oven before serving.</li>
<li>Serve hot with vegetable manchurian.</li>
</ol>
<hr>
<button type="button" onclick="change()">Finished Reading!</button>
<p id="finishReading"></p>
<p>Please rate the recipe from 1 to 5 (1 - poor, 2 - satisfactory, 3 - good, 4 - very good,
5 - excellent)</p> <input style="margin-left:20px" id="rating"/>
<button onclick="display()">Rate</button>
<p id="display"></p> <br>
<script>
function change()
{
ele=document.getElementById("finishReading");
ele.innerHTML="<p> Thank you for reading this page! </p> <br>";
}
function display()
{
var rating, message;
rating=document.getElementById("rating").value;
message=(rating<3)?"We hope to make more improvements soon.":"Do try this recipe at home!";
document.getElementById("display").innerHTML=message;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:white;
}
h1
{
font-family:"Calibri";
color:#660000;
text-align:center;
}
th
{
background-color:#ffcc33;
color:#330000;
}
p, li
{
font-family:"Arial";
font-size:18px;
margin-left:20px;
margin-bottom:10px;
}
table,th,td
{
border:2px solid black;
border-collapse:collapse;
font-size:18px;
font-family:"Arial";
padding:4px;
margin:20px;
}
#id1
{
height:34px;
width:960px;
font-family:"Calibri";
font-size:24px;
background-color:#660000;
color:#ffcc33;
margin:20px;
}
.auto-style1 {
text-align: center;
}
button
{
margin:20px;
}
.auto-style2 {
text-align: left;
margin-left:20px
}
.auto-style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
</style>
<title> Vegetable Fried Rice Recipe </title>
</head>
<body>
<h1 class="auto-style2"> Vegetable Fried Rice Recipe </h1>
<p> A delicious recipe that makes your mouth water! </p>
<p>
<img src="vegetable-fried-rice.jpg" alt="Vegetable Fried Rice">
</p>
<p>Serves: 4 <br> Cooking time: 45 minutes</p>
<div id="id1" class="">
Ingredients
</div>
<p>
<table>
<tr>
<th>Ingredient</th>
<th>Quantity</th>
</tr>
<tr>
<td>Basmati rice</td>
<td class="auto-style1">500g</td>
</tr>
<tr>
<td>Chopped cabbage</td>
<td class="auto-style1">200g</td>
</tr>
<tr>
<td>Finely chopped carrots</td>
<td class="auto-style1">200g</td>
</tr>
<tr>
<td>Spring onions</td>
<td class="auto-style1">2</td>
</tr>
<tr>
<td>Peas</td>
<td class="auto-style1">300g</td>
</tr>
<tr>
<td>Coriander leaves</td>
<td class="auto-style1">4 stalks</td>
</tr>
<tr>
<td>Capsicum</td>
<td class="auto-style1">2</td>
</tr>
<tr>
<td>Soya sauce</td>
<td class="auto-style1">4 teaspoons</td>
</tr>
<tr>
<td>Vinegar</td>
<td class="auto-style1">4 teaspoons</td>
</tr>
<tr>
<td>Oil</td>
<td class="auto-style1">5 teaspoons</td>
</tr>
<tr>
<td>Salt</td>
<td class="auto-style1">To taste</td>
</tr>
</table>
</p>
<div id="id1" class="">
Method
</div>
<ol>
<li>Boil rice in a pan for 20 minutes. Drain and cool on a plate.</li>
<li>Heat oil in a wok and stir-fry the vegetables.</li>
<li>Add spring onions and fry until golden-brown.</li>
<li>Add vinegar and soya sauce.</li>
<li>Mix well with the rice. Add sauces and salt to taste.</li>
<li>Heat in a microwave or oven before serving.</li>
<li>Serve hot with vegetable manchurian.</li>
</ol>
<hr>
<button type="button" onclick="change()">Finished Reading!</button>
<p id="finishReading"></p>
<p>Please rate the recipe from 1 to 5 (1 - poor, 2 - satisfactory, 3 - good, 4 - very good,
5 - excellent)</p> <input style="margin-left:20px" id="rating"/>
<button onclick="display()">Rate</button>
<p id="display"></p> <br>
<script>
function change()
{
ele=document.getElementById("finishReading");
ele.innerHTML="<p> Thank you for reading this page! </p> <br>";
}
function display()
{
var rating, message;
rating=document.getElementById("rating").value;
message=(rating<3)?"We hope to make more improvements soon.":"Do try this recipe at home!";
document.getElementById("display").innerHTML=message;
}
</script>
</body>
</html>
