[go: up one dir, main page]
Scribd
Upload
1K views26 pages

Web Technologies Assessment 2

The document describes a JavaScript program that allows a user to: 1. Enter a phrase into a text box and click a button to display the words of that phrase in reverse order, with every other word underlined. 2. Optionally enter a "filter" text to exclude words containing that text from being displayed. 3. If words are excluded, a message is displayed below stating how many words were filtered out.

Uploaded by

ANKIT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views26 pages

Web Technologies Assessment 2

The document describes a JavaScript program that allows a user to: 1. Enter a phrase into a text box and click a button to display the words of that phrase in reverse order, with every other word underlined. 2. Optionally enter a "filter" text to exclude words containing that text from being displayed. 3. If words are excluded, a message is displayed below stating how many words were filtered out.

Uploaded by

ANKIT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

ANKIT KUMAR

19BIT0267

WEB TECHNOLOGIES
ASSESMENT-2
1. A parking garage charges a $2.00 minimum fee to park for up to three hours. The garage charges an
additional $0.50 per hour for each hour or part thereof in excess of three hours. The maximum
charge for any given 24-hour period is $10.00. Assume that no car parks for longer than 24 hours at a
time. Write a script that calculates and displays the parking charges for each customer who parked a
car in this garage yesterday. You should input from the user the hours parked for each customer.
The program should display the charge for the current customer and should calculate and display
the running total of yesterday's receipts. The program should use the function calculate-Charges to
determine the charge for each customer. Use a prompt dialog to obtain the input from the user.

HTML code:
<html>
<head>
<title>parking garage</title>
</head>
<body>
<script type="text/javascript" src="1j.js"></script>
</body>
</html>

JavaScript:
var n=prompt("enter number of customers"); var charge=[];
var total=0;
for(var i=1;i<=n;i++)
{
charge[i-1]=calculateCharges(prompt("enter number of hours parked for customer "+i));
total+=charge[i-1];
}
for(var i=1;i<=n;i++)
{
document.writeln("charges for customer "+i+" : $"+charge[i-1]); document.write("<br>");
}
document.write("Running total of yesterday's receipt: $"+total); function calculateCharges(n)
{
var charge=2;
if(n>3) charge+=(n-3)*0.5; if(charge>10)charge=10; return charge;
}

Output:
2. Create a web page containing three divisions.
a) The first division displays a digital clock on the rightmost end.
b) The width of the first division is 100%. The second division and third division lay side by side.
c) The second division has an image slider and third division has a color picker and two list box
having font-family and size and a button. When a button is clicked the background color, font and
font size should change for a whole page. Use JavaScript to implement the above.

HTML Code:
<html>
<head>
<title>division</title>
</head>
<style type="text/css">
.a {
position: absolute; top: 0;
left: 0;
width: 100%;
height: 10%; background: teal;
}

.b {
position: absolute; top: 10%;
left: 0;
height: 90%;
width: 35%; background: pink;
}

.c {
position: absolute; top: 10%;
right: 0;
height: 90%;
width: 65%; background: yellow;
}

#time {
float: right;
color: white; margin-right: 20px; margin-top: 20px;
}

img {
position: absolute; top: 30%;
left: 5%;
}
</style>
<body onload="display()" id="mainId">
<div class="a body">
<div id="time"></div>
</div>
<div class="b body">
<img src="car.jpg">
</div>
<div class="c body">
<table>
<tr>
<td>Color</td>
<td><input type="color" id="color"><br></td>
</tr>
<tr>
<td>Font family</td>
<td><select id="fontFamily">
<option style="font-family:Verdana">Verdana</option>
<option style="font-family:Georgia">Georgia</option>
<option style="font-family:Courier">Courier</option>
<option style="font-family:Consolas">Consolas</option>
<option style="font-family:Geneva">Geneva</option>
</select></td>
</tr>
<tr>
<td>Font size</td>
<td><select id="fontSize">
<option disabled>Font Size</option>
<option>10px</option>
<option>20px</option>
<option>30px</option>
<option>40px</option>
<option>50px</option>
</select></td>
</tr>
<tr>
<td colspan="2"><input type="submit" onclick="change()"></td>
</tr>
</table>
</div>
<script type="text/javascript" src="2j.js"></script>
</body>
</html>

JavaScript:
function display()
{
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
m=format(m);
s=format(s);
document.getElementById("time").innerHTML=h+":"+m+":"+s;
setTimeout(display,1000);
}
function format(n)
{
if(n<10) n="0"+n; return n;
}
var i=0; function image()
{
var d=document.getElementsByTagName("img")[0];
var images=["car.jpg","car2.jpg","car3.jpg","car3.jpg"];
d.setAttribute("src",images[i]);
d.setAttribute("alt",images[i].split("\.")[0]);
i++;
if(i>3)i=0;
setTimeout(image,1000);
}
image();
function change()
{
var fontFamily=document.getElementById("fontFamily");
var fontSize=document.getElementById("fontSize");
var color=document.getElementById("color");
var d=document.getElementsByClassName("body");
for(var i=0;i<3;i++)
{
d[i].style.background=color.value;
}
var body=document.getElementById("mainId");
body.style.fontSize=fontSize.value;
body.style.fontFamily=fontFamily.value;
}
Output:
3. Design a student registration form which takes student name, register number, DOB, program, email
id, temporary address, permanent address, phone number. Validate the following using JavaScript:
a) Mobile number should be exactly 10 digits.
b) Register number should have alphabets and numbers only.
c) Name should not exceed 30 characters and can be only alphabets.
d) Email validation.
e) Provide a checkbox saying “Permanent address is same as temporary address”. If checked, the
value of permanent address should be added automatically from temp address. And should be in
disabled mode.

HTML code:
<html>
<head>
<title>Student Registration</title>
</head>
<style>
p{
color: red;
}
</style>
<body>
<form name="myForm" method="post" onsubmit="return validate()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
<td>
<p id="name"></p>
</td>
</tr>
<tr>
<td>Registration number</td>
<td><input type="text" name="regno"></td>
<td>
<p id="regno"></p>
</td>
</tr>
<tr>
<td>Date Of Birth</td>
<td><input type="date" name="date"></td>
<td>
<p id="date"></p>
</td>
</tr>
<tr>
<td>Program</td>
<td><input type="text" name="program"></td>
<td>
<p id="program"></p>
</td>
</tr>
<tr>
<td>Email id</td>
<td><input type="text" name="email"></td>
<td>
<p id="email"></p>
</td>
</tr>
<tr>
<td>Temporary address</td>
<td><input type="text" name="taddress"></td>
<td>
<p id="taddress"></p>
</td>
</tr>
<tr>
<td>Permanent address same as Temporary address?</td>
<td><input type="checkbox" name="checkbox" onchange="check()"></td>
<td>
<p id="checkbox"></p>
</td>
</tr>
<tr>
<td>Permanent address</td>
<td><input type="text" name="paddress"></td>
<td>
<p id="paddress"></p>
</td>
</tr>
<tr>
<td>Phone number</td>
<td><input type="text" name="phone"></td>
<td>
<p id="phone"></p>
</td>
</tr>
<tr colspan="3">
<td><input type="submit"></td>
</tr>
</table>
</form>
<script src="3j.js"></script>
</body>
</html>

JavaScript:
function validate()
{
var f=0;
var ph=document.forms["myForm"]["phone"].value;
var reg=document.forms["myForm"]["regno"].value;
var name=document.forms["myForm"]["name"].value;
var email=document.forms["myForm"]["email"].value;
if(ph.length==10)
{
document.getElementById("phone").innerHTML=" ";
f++;
}
else document.getElementById("phone").innerHTML="*please provide correct phone n umber";
var pattern=/^[0-9 a-z A-Z]+$/;
if(reg.match(pattern))
{
document.getElementById("regno").innerHTML=" ";
f++;
}
else document.getElementById("regno").innerHTML="*please provide correct registr ation
number";
pattern=/^[a-z A-Z]{1,30}$/; if(name.match(pattern))
{
document.getElementById("name").innerHTML=" ";
f++;
}
else document.getElementById("name").innerHTML="*please provide name in less tha n 30
characters";
pattern=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(email.match(pattern))
{
document.getElementById("email").innerHTML=" ";
f++;
}
else document.getElementById("email").innerHTML="*please provide correct email";
if(f==4)
{
alert("form submitted successfully");
return true;
}
else return false;
}
function check() {
var box=document.forms["myForm"]["checkbox"].checked;
var padd=document.forms["myForm"]["paddress"];
var tadd=document.forms["myForm"]["taddress"];
if(box==true)
{
padd.disabled=true;
padd.value=tadd.value;
}
else
{
padd.disabled=false;
padd.value="";
}
}
Output:

4. Write the JavaScript code to add behaviour to the following page for manipulating strings.
a) The page UI allows the user to type a phrase into a text box. The user can click the "Go!" button
to display the words in that phrase in reverse order. Each word in the phrase should be inserted as a
span with a class of word, inside a div with the id of words. Every other word (the first, third, fifth,
etc.) should also be underlined
b) The user can optionally specify a "filter" text by typing into a text box with the id of filter. If a
non-blank filter is specified, you should exclude any words from the phrase that contain that filter
text, case-insensitively. For example, if the filter text is "abc", exclude any words containing abc,
ABC, aBc, etc.
c) If any words are excluded, under the list of words you should modify the div with id of count to
display text of the form, "5 word(s) filtered out". The code should work for multiple clicks of the
button. On each click it should clear any previous information you injected. You may assume that
words in the phrase are separated by single spaces.
d) These screenshots show the initial state, and after phrases have been typed and "Go!" is clicked.

HTML code:
<html>
<head>
<title>Sentense Reverser</title>
</head>
<style>
.word {
border: 1px dotted red;
color: red; background: pink;
margin-right: 5px;
padding: 4px;
text-decoration: underline;
}
.word:nth-child(2n) { text-decoration: none;
}
</style>

<body>
<h1>Sentence Reverser!</h1>
<table>
<tr>
<td>Phrase:</td>
<td><input type="text" id="phrase"></td>
</tr>
<tr>
<td>Filter:</td>
<td><input type="text" id="filter"></td>
</tr>
<tr colspan="2">
<td><input type="submit" value="Go!" onclick="reverser()"></td>
</tr>
</table>
<br>
<div class="words" id="w"></div>
<p id="result"></p>
<script src="4j.js"></script>
</body>
</html>

JavaScript:
function reverser()
{
var str=document.getElementById("phrase").value;
var arr=str.split(" ");
var s="";
var c=0;
var filter=document.getElementById("filter").value;
for(var i=arr.length-1;i>=0;i--)
{
if(filter=="")
s=s+"<span class=\"word\">"+arr[i]+"</span>";
else
{
var temp=arr[i];
if(temp.toUpperCase().startsWith(filter.toUpperCase())==false)
s=s+"<span class=\"word\">"+arr[i]+"</span>";
else
c++;
}
}
document.getElementsByClassName("words")[0].innerHTML=s;
document.getElementById("result").innerHTML=c+" word(s) filtered out";
}
Output:

5. Develop an online Railway Reservation application.


a) It has top frame with the name “Online Railway Reservation System” in the middle, there is a
logo/image in the left corner using suitable CSS styles and the left frame with the links for Ticket
booking and availability checking; for each link the target should be the right frame.
b) Create a Ticket Booking form which should have From and To in a text box, Train Names in a drop
down box, Coach Number in a list box, Date in a date field, Timing in a text box, Passengers Male
and female in a dropdown menu showing the count number and Submit and Reset button.
c) Assume availability of tickets already declared in the script. Create a DOM event to display the
ticket confirmation details on any HTML element when ticket is available otherwise display “tickets
not available” by invoking any other DOM event.

HTML code:
<html>
<head>
<title>Railway</title>
<frameset rows="20%,*">
<frame src="5top.html">
<frameset cols="30%,*">
<frame src="5left.html">
<frame src="5right.html" name="right">
</frameset>
</frameset>
</head>
<body>
</body>
</html>

Top Frame:
<html>
<head>
<style>
body {
background: lightblue
}
img {
position: absolute; top: 2px;
left: 5px;
}
h1 {
margin: 0 auto; position: absolute; left: 25%;
width: 50%;
top: 25%;
font-family: Roboto;
}
</style>
</head>
<body>
<img src="irctc.png" alt="irctc logo" style="width:100px;height:120px";>
<h1 align="center">Online Railway Reservation System</h1>
</body>
</html>
Left Frame:
<html>
<head>
<script>
</script>
</head>
<body>
Number of tickets<input type="number" name="" id="count">
<br>
<input type="submit" onclick="check()">
<h3 id="h3"></h3>
<script>
function check() {
var n = document.getElementById("count").value; if (n < 250) {
document.getElementById("h3").innerText = "Tickets Available";
} else
document.getElementById("h3").innerText = "Tickets Not Available";
}
</script>
</body>
</html>
Right Frame:
<html>
<head>
<style>
td {
padding: 8px;
}
tr:nth-child(2n) td { padding-top: 0;
}
tr:nth-child(2n+1) td { padding-bottom: 0;
}
div {
margin: 0 auto; position: absolute; width: 50%;
left: 25%;
right: 25%;
top: 10%;
padding: 0;
}
</style>
</head>
<body>
<div>
<table cellspacing="5px" style="border:2px solid black;width:100%">
<form action="#" method="POST" style=" margin:0;padding: 0">
<tr>
<td>Source Station</td>
<td>Destination Station</td>
</tr>
<tr>
<td><input type="text" placeholder="From"></td>
<td><input type="text" placeholder="To"></td>
</tr>
<tr>
<td>Train Name</td>
<td>Coach Number</td>
</tr>
<tr>
<td>
<select>
<option >Rajdhani Express</option>
<option >Shatabdi Express</option>
<option >Durunto Express</option>
<option >GareebRath</option>
<option >Chennai Express</option>
</select>
</td>
<td>
<select>
<option >S1</option>
<option >S2</option>
<option >S3</option>
<option >S4</option>
<option >S5</option>
<option >S6</option>
<option >S7</option>
<option >S8</option>
</select>
</td>
</tr>
<tr>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td><input type="date"></td>
<td><input type="time"></td>
</tr>
<tr>
<td>Gender</td>
<td>Count</td>
</tr>
<tr>
<td>
<select>
<option >Male</option>
<option >Female</option>
</select>
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td align="right"><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</form>
</table>
</div>
</body>
</html>
Output:
6. i) Design a table in the format given below using HTML and JQuery selectors.
ii) Apply different background for odd and even rows of the table.
iii) Apply different CSS for table header using JQuery selectors.

HTML code:
<html>
<head>
<title>Table</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mannix</td>
<td>Bolton</td>
<td>Merizo</td>
<td>Michigan</td>
</tr>
<tr>
<td>Suki</td>
<td>King</td>
<td>Fairmont</td>
<td>Oklahoma</td>
</tr>
<tr>
<td>Shelby</td>
<td>English</td>
<td>Durham</td>
<td>Arkansas</td>
</tr>
<tr>
<td>Portia</td>
<td>Burns</td>
<td>Priceton</td>
<td>Rhode Island</td>
</tr>
<tr>
<td>Dacey</td>
<td>Young</td>
<td>Covina</td>
<td>South Carolina</td>
</tr>
<tr>
<td>Clark</td>
<td>Reyes</td>
<td>Grand Rapids</td>
<td>New Jersey</td>
</tr>
<tr>
<td>Maris</td>
<td>Decker</td>
<td>Sierra Madre</td>
<td>Georgia</td>
</tr>
</tbody>
</table>
<script src="6j.js"></script>
</body>
</html>

JavaScript:
$("td").css("padding","5px 10px");
$("th").css("padding","5px 10px");
$("tbody tr").css({"color":"white","background":"dimgray"});
$("tbody tr:nth-child(2n)").css({"color":"black","background":"white"});

Output:
7. Write the JQuery code, so that when the Delete button is clicked, any button whose text value is
divisible by the number written in the text field is removed from the page. You may assume that a
valid number has been typed in the text field. The HTML code is the following: These screenshots
show the initial page and its new appearance after typing 2 into the text field and pressing Delete:

HTML code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.btns {
margin-right: 4px;
}
</style>
<title>
divide
</title>
</head>
<body>
Divisible by :
<input type="number" id="query">
<input type="submit" onclick="divide()" value="delete">
<br> Click A Button :
<div id="buttons"></div>
<script src="7j.js"></script>
</body>
</html>

JavaScript:
var arr = [];
for (var i = 0; i < 10; i++) {
var n = Math.round(Math.random() * 100) + 1;
$('#buttons').append("<button class=\"btns\" value=" + n + ">" + n + "</button>"
);
arr.push(n);
}
function divide() {
var bts = $(".btns");
var nu = Number($("#query").val());
for (var i = 0; i < 10; i++) {
var d = bts[i]; console.log(d.text);
if (Number(d.innerHTML) % nu == 0) { console.log(d.text);
d.style.display = "none"; console.log("deleted");
}
}
}
Output:

8. Write the JQuery code to add behavior to the following page for keeping track of a todo-list.
a) The page UI allows the user to type an item into a text box. The user can click the "add" button to
add the item to the bottom of the list. Each word in the phrase should be inserted as a li, inside an ul
with the id of list.
b) If the user wishes to remove an item he or she can type the text of the item he or she wishes to
remove in the text box and click the “remove” button. This should be case insensitive. For example,
if the list only contains “foo” and the user tries to remove “FoO”, it should be removed. If the user
tries to remove an item that is in the list multiple times only the first occurrence should be removed.
c) The items should have background colors that alternate between white and yellow (first white,
then yellow, then white, yellow, etc.). This should still be the case no matter how many items are
removed or added and no matter what order these operations are done in.
d) The code should work for multiple clicks of the buttons. On each click it should clear any previous
information you typed in the input boxes.

HTML code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
li:nth-child(2n) { background: yellow;
}
#list {
width: 200px;
}
</style>
<title>To-do</title>
</head>
<body>
<h1>My super nifty to-do list</h1>
<ul id="list"></ul>
<input type="text" id="inputField">
<input type="submit" value="add" onclick="add()">
<input type="submit" value="remove" onclick="remove()">
<script src="8j.js"></script>
</body>
</html>

JavaScript:
function add() {
var str = $("#inputField");
var s = "<li>" + str.val() + "</li>";
$("#list").append(s);
str.val("");
}
function remove() {
var str = $("#inputField").val();
str = str.toUpperCase();
var d = $("#list").children();
var n = d.length;
for (var i = 0; i < n; i++) {
if (d[i].textContent.toUpperCase() == str) { d[i].remove();
break;
}
}
$("#inputField").val("");
}

Output:
9. a) Validate the Event Registration Form given below using Jquery for the following conditions.
 All fields are mandatory
 Zip code should be exactly five digits
 Email validation
b) Create an array for a list of cities. Provide autocomplete option for city field using that array as a
source.

HTML code:
<html>
<head>
<title>Event Registration</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="cities.json"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-
awesome.min.css">
</head>
<style>
#select {
display: none;
}

input[type="text"], select {
width: 200px;
}

.top {
position: absolute; top: 0;
left: 0;
width: 100%;
height: 15%; background: #264d73;
}

.middle {
position: absolute; top: 15%;
left: 0;
width: 100%;
height: 85%; background: #b3c6ff; font-size: 12px;
font-family: Consolas;
}
.bottom {
position: absolute; bottom: 0;
left: 0;
width: 100%;
height: 8%; background: #264d73; z-index: 0;
}
i{
margin-right: 20px;
}
table {
margin: 0 auto;
height: 10%; padding-top: 0px; width: 30%;
/* border: 2px solid red; */
}
td:nth-child(1) {
text-align: right; font-weight: 800;
}
</style>
<body>
<div class="top" style="text-align:center;">
<h1 style="color:white;"><i class="fa fa-calendar" style="font- size:48px;color:red"></i>Event
Registration Form</h1>
</div>
<div class="middle">
<table cellpadding="10px">
<form method="POST" onsubmit="return check()">
<tr>
<td>First Name</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>Mailing Address</td>
<td><input type="text" id="email"></td>
<td></td>
</tr>
<tr>
<td valign="top">City</td>
<td valign="top">
<input type="text" id="city" onkeyup="myFunc()"></td>
<td style="width:200px">
<select id="select"></select>
</td>
</tr>
<tr>
<td>State</td>
<td><select id="state" onchange="myFunc()"></select></td>
<td></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type="text" id="zip"></td>
<td></td>
</tr>
<tr>
<td style="border-
top:1.5px dashed black;">Are you speaking at<br> the conference?</td>
<td style="border-
top:1.5px dashed black;"><input type="checkbox" name="speaking">Yes<input type="chec kbox"
name="speaking">No</td>
<td></td>
</tr>
<tr>
<td>Conference pass</td>
<td><input type="radio" name="pass">1-Day pass<br>
<input type="radio" name="pass">2-Day pass<br>
<input type="radio" name="pass">3-Day pass<br>
<input type="radio" name="pass">4-Day pass
</td>
<td></td>
</tr>
<tr>
<td style="border-top:1.5px dashed black;">Meal Preference</td>
<td style="border-top:1.5px dashed black;">
<select id="meal">
<option>Select</option>
<option>Veg</option>
<option>Non-Veg</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td colspan="3" id="display" style="text- align:center;color:red;"><pre> </pre></td>
</tr>
<div class="bottom">
<tr>
<td colspan="3" style="width:20%;position:absolute;z- index:1;text-align:center;bottom:0;"><input
type="submit"></td>
</tr>
</div>
</form>
</table>
</div>
<!-- <div class="bottom"></div> -->
<script src="9j.js"></script>
</body>
</html>

JavaScript:
$(".option").on("click", function() { console.log("hello");
$("#city").val($(this).val());
});

var arr = "Select state,Andhra Pradesh,Arunachal Pradesh,Assam,Bihar,Chhattisgarh,Go


a,Gujarat,Haryana,Himachal Pradesh,Jammu and Kashmir,Jharkhand,Karnataka,Kerala,Madh ya
Pradesh,Maharashtra,Manipur,Meghalaya,Mizoram,Nagaland,Odisha,Punjab,Rajasthan,Si kkim,Tamil
Nadu,Telangana,Tripura,Uttar Pradesh,Uttarakhand,West Bengal,Andaman and
Nicobar,Chandigarh,Dadra and Nagar Haveli,Daman and Diu,Lakshadweep,Delhi,Puducherry
".split(",");
for (var i = 0; i < 36; i++) {
$("#state").append("<option>" + arr[i] + "</option>");
}

function check() {
var bool = true;
var txt = "";
var d = $("input:text");
$("#display").html("");
console.log(d);
for (var i = 0; i < d.length; i++) {
console.log(d[i].value + "hello");
if (d[i].value == "") {
bool = false; txt += "text";
}
}
if ($("#state").val() == "Select state") {
bool = false;
txt += "state";
}
d = $("input:checkbox");
if (!(d[0].checked || d[1].checked)) {
bool = false;
txt += "checkbox";
}
d = $("input:radio");
if (!(d[0].checked || d[1].checked || d[2].checked || d[3].checked)) {
bool = false;
txt += "radio";
}
if ($("#meal").val() === "Select") {
bool = false;
txt += "meal";
}
if (!bool) {
$("#display").html("*All fields are mandatory");
}
if ($('#zip').val().match(/^\d{5}$/) == null) {
$("#display").append("\nEnter correct Zip code");
bool = false;
}
if ($('#email').val().match(/^\w+([\.-]?\w+)*@\w+([\.-
]?\w+)*(\.\w{2,3})+$/) == null) {
$("#display").append("\nEnter correct mailing address ");
bool = false;
}
return bool;
}
function myFunc() {
$("#select").html(""); var data = my;
var arr = data[$("#state").val()];
var str = $("#city").val();
if (str == "") $("#select").css("display", "none");
// console.log(str);
var bool = true;
for (var i = 0; i < arr.length; i++) {
if (arr[i].toLowerCase().startsWith(str.toLowerCase()) && str != "") {
$("#select").css("display", "block");
bool = false;
$("#select").append("<option class='option'>" + arr[i] + "</option>");
}
}
if (bool) $("#select").css("display", "none");
}

document.getElementById("select").addEventListener("click", function() {
console.log(document.getElementById('select').value);
$('#city').val(document.getElementById('select').value)
$("#select").css("display", "none");
});

Output:
10. Write the XHTML code to create the form with the following capabilities
a) A text widget to collect the users name
b) Four check boxes, one each for the following items
i. Four 100 watt light bulbs for Rs. 20=39
ii. Eight 100 watt light bulbs for Rs 40=20
iii. Four 100 watt long life light bulbs for Rs. 30=95
iv. Eight 100 watt long life light bulbs for Rs 70=49
c) A collection of 3 radio buttons that are labeled as follows
i. Visa ii. Master Card iii. Discover
d) Computes the total cost of the ordered light bulbs for the above program after adding 13.5% VAT.
The program must inform the buyer of exactly what was ordered in table.

HTML code:
<html>
<head>
<title>Order</title>
<script type="text/javascript" > function loadjson()
{
var json = '{"h1": "Select the items : Quantity"}'; var obj = JSON.parse(json);
document.getElementById("heading").innerHTML=obj.h1;
document.getElementById("heading").innerText=obj.h1;
}
var pay; function info(){
if(document.getElementById('r1').checked){ pay=document.getElementById('r1');
}
else if(document.getElementById('r2').checked){ pay=document.getElementById('r2');
}
else if(document.getElementById('r3').checked){ pay=document.getElementById('r3');
}
document.getElementById("result").innerHTML =
"User name:"+document.getElementById("name").value+"<br/>"+ "<h2>You have ordered following
items</h2></br>"+
"<table border=2px><tr>"+ "<td><b>Item</b></td>"+ "<td><b>Qty</b></td>"+
"<td><b>Price</b></td>"+ "<td><b>Total</b></td>"+ "</tr>"+
"<tr>"+
"<td>Four 100 watt bulbs for Rs. 20.39</td>"+
"<td>"+document.getElementById("q1").value+"</td>"+ "<td>20.39</td>"+
"<td>"+document.getElementById("q1").value*20.39+"</td>"+ "</tr>"+
"<tr>"+
"<td>Eight 100watt bulbs for Rs 40.20</td>"+
"<td>"+document.getElementById("q2").value+"</td>"+ "<td>40.20</td>"+
"<td>"+document.getElementById("q2").value*40.20+"</td>"+ "</tr>"+
"<tr>"+
"<td>Four 100watt long life bulbs for Rs. 30.95</td>"+
"<td>"+document.getElementById("q3").value+"</td>"+ "<td>30.95</td>"+
"<td>"+document.getElementById("q3").value*30.95+"</td>"+ "</tr>"+
"<tr>"+
"<td>Eight 100watt long life bulbs for Rs 70.49</td>"+
"<td>"+document.getElementById("q4").value+"</td>"+ "<td>70.49</td>"+
"<td>"+document.getElementById("q4").value*70.49+"</td>"+ "</tr>"+
//0.135*(getElementById("q1").innerHTML*20.39+getElementById("q2").innerHTML*40.20+g
etElementById("q3").innerHTML*30.95+getElementById("q4").innerHTML*70.49)
"</table><br>"+
"Total bill including 13.5% tax :<b>"+

1.135*(document.getElementById("q1").value*20.39+document.getElementById("q2").value
*40.20+document.getElementById("q3").value*30.95+document.getElementById("q4").value
*70.49)
+ "</b>payment mode: "+ pay.value;
}
</script>
</head>
<body onload="loadjson();">
<form>
User: <input type="text" name="mname" size=30 id="name"/> <br/>
<b><h2><label id="heading" ></label></h2></b>
<table>
<TR>
<TD>
<input type="checkbox" name="option1" checked="checked"/>
<label id="chk1">Four 100 watt bulbs for Rs. 20.39 </label>
</TD>
<TD>
<input type="text" id="q1" name="VAL1" size=2 />
</TD>
</TR>
<TR><TD>
<input type="checkbox" name="option2" />
<label id="chk2">Eight 100watt bulbs for Rs 40.20 </label></TD>
<TD>
<input type="text" id="q2" name="VAL2" size=2/>
</TD>
</TR>
<TR>
<TD>
<input type="checkbox" name="option3" />
<label id="chk3">Four 100watt long life bulbs for Rs. 30.95 </label>
</TD>
<TD>
<input type="text" id="q3" name="VAL3" size=2/>
</TD>
</TR>
<TR>
<TD>
<input type="checkbox" name="option4" />
<label id="chk4">Eight 100watt long life bulbs for Rs 70.49 </label><br/>
</TD>
<TD>
<input type="text" id="q4" name="VAL4" size=2/>
</TD>
</TR>
</table>
<input type="radio" id="r1" name="paymode" value="visa" checked="checked" /> VISA
<br/>
<input type="radio" id="r3" name="paymode" value="mcard"/> MASTER CARD <br/>
<input type="radio" id="r2" name="paymode" value="discover"/> DISCOVER <br/>
<input type="button" id="bt" value="submit" onclick="info()"/>
<input type="reset" value="Reset Order" />
<p id="result"></p>
</form>
</body>
</html>

Output:

You might also like