In: Computer Science
Problem Description Write a web page that allows a person to enter address information, salutation, and a prize amount. Place a button at the bottom of the page that, which clicked, displays the contents of a letter informing them that they've won
Dear Student ,
As per the requirement submitted above , kindly find the below solution.
Here a new web page with name "won.html" is created, which contains following code.
won.html :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title>Letter Details</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- dropdown list for salutation -->
<select id="salutation">
<option value="selected" selected>--Select Salutation--</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs</option>
</select>
<!-- textbox for name -->
<input type="text" id="txtName" placeholder="Enter Name">
<br><br>
<!-- textarea for address -->
<textarea name="address" id="address" cols="20" rows="5" placeholder="Enter Address"></textarea>
<br><br>
<!-- textbox for price -->
<input type="text" id="txtPrice" placeholder="Enter price amount"/>
<br><br>
<!-- button to submit form -->
<input type="button" value="Submit" onclick="getletterDetails()">
<br><br>
<!-- div to display details -->
<div id="letter"></div>
<!-- <script> is used for javascript -->
<script>
//function to get details
function getletterDetails()
{
//get salutation
var salutation=document.getElementById("salutation").value;
//get name
var name=document.getElementById("txtName").value;
//get address
var address=document.getElementById("address").value;
//get price
var price=document.getElementById("txtPrice").value;
//print details in the label
var htmlString="";
htmlString+="Welcome "+salutation+" "+name+" you have won price of "+price;
htmlString+="<br/> Amount will be sent on the below address<br/>";
htmlString+="<address>"+address+"</address>";
//display details on the label
document.getElementById("letter").innerHTML=htmlString;
}
</script>
</body>
</html>
======================================================
Output : Compile and Run won.html to get the screen as shown below
Screen 1 :won.html
Screen 2:When details are entered , will get the screen as shown below
NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.