0% found this document useful (0 votes)

66 views49 pages

Name: B K Anirudh REG - NO: 19BIT0348: Digital Assignment 2 Web Technologies

The document provides code for several JavaScript coding exercises: 1. A parking charge calculator that determines fees based on hours parked. 2. A web page with three divisions - one displaying a digital clock, one with an image slider, and one with a color picker and font controls. 3. A student registration form with validation checks on various fields. 4. Code to reverse words in a phrase, optionally filtering words, and counting filtered words.

Uploaded by

Duffewn

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

0% found this document useful (0 votes)

66 views49 pages

Name: B K Anirudh REG - NO: 19BIT0348: Digital Assignment 2 Web Technologies

Uploaded by

Duffewn

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/ 49

DIGITAL ASSIGNMENT 2

WEB TECHNOLOGIES

NAME: B K ANIRUDH
REG.NO: 19BIT0348
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.

CODE:
<!DOCTYPE html>

<html>

<head>

function calculate_Charges()
{

var hours = parseFloat(prompt("Enter the number of hours: ","0"));

var yesterday = parseFloat(prompt("Enter yesterdaysamount :","0"));
var charge=2;

if (hours>24)

{charge=10;}
else if(hours>3)

{charge=charge+0.5*(hours-3);}

var total=yesterday+charge;

document.write("your charge ="+charge+"<br>"+"adding yesterday's ="+total);

}
</script>

<body>

<input type="button" value="click" onClick="calculate_Charges()">

</body>
</head></html>
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.

CODE:
<!DOCTYPE html>

<style>

body{ margin:0;}
#clock{ width:1 00%;

height:20%; text-align: right;

background-color: rgb(38, 245, 166);

}

#slider{ width:20%; height: 80%; float: left;

background-color: rgb(174, 175, 238);

img{
display: block; height:

60%;

width: 90%;
padding: 5%;

#color{ float:right; width:50%; height: 80%;

background-color: rgb(227, 255, 204);

}
input

{margin: 5%;}

form
{padding: 20%;}
</style>

<script> function clock()

var time = newDate();

var hh =time.getHours();

var mm =time.getMinutes();

var ss =time.getSeconds();

hh =zero(hh);
mm =zero(mm);

ss =zero(ss);

document.getElementById("clock").innerHTML ="<p style = 'padding: 1%;'>" +

hh + " : " + mm + " : " + ss +"</p>"; setTimeout(clock, 500);
}

function zero(t)

if(t<10)

{t="0"+t;}
return t;

</script>

</head>
<body onload = "clock()">

<img src ="dog1.jpg">

<img src ="dog3.jpg">

</div>

var index = 0;
show();
functionshow()

var slides =document.getElementsByTagName("img");

for(var i=0; i<slides.length; i++)
{slides[i].style.display = "none";}

index++;

if(index > slides.length)

{index = 1;}
slides[index-1].style.display = "block";

setTimeout(show, 5000);

</script>
<div id = "color">

<form>

<input type = "color" id = "bgcolor">

<select id="fontFamily">
<option value="arial">Arial</option>

<option value="cambria">Cambria</option>

<option value="consolas">Consolas</option>

</select>

</select>

<input type = "button" value = "Apply" onClick = "applyFont()">

</form>

var bgc = document.getElementById("bgcolor").value;

document.getElementById("clock").style.backgroundColor = bgc;
document.getElementById("slider").style.backgroundColor =bgc;
document.getElementById("color").style.backgroundColor = bgc;

var ff = document.getElementById("fontFamily").value;
document.body.style.fontFamily = ff;
var fs =document.getElementById("fontSize").value;

document.body.style.fontSize = fs;

</script>
</div>

</body>

</html>

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.

CODE:
HTML CODE:

<html>

<head>

</head>
<style>

p {

color: red;

</style>
<body>
<form name="myForm" method="post" onsubmit="return validate()">

<table>

<td><input type="text" name="name"></td>

<td>

</td>
</tr>

<tr>

<td>Registration number</td>
<td><input type="text" name="regno"></td>
<td>

</td>

</tr>
<tr>

<td>Date Of Birth</td>

<td><input type="date" name="date"></td>

</td>

</tr>

<tr>
<td>Program</td>

<td><input type="text" name="program"></td>

<td>

</td>

</tr>
<tr>

<td>Email id</td>

<td><input type="text" name="email"></td>

<td>

</td>
</tr>

<tr>
<td>Temporary address</td>
<td><input type="text" name="taddress"></td>

<tr>
<td>Permanent address same as Temporary address?</td>
<td><input type="checkbox" name="checkbox" onchange="check()"></td>

<td>

</td>
</tr>

<tr>

<td>Permanent address</td>

<td><input type="text" name="paddress"></td>

<td>

</td>

</tr>
<tr>

<td>Phone number</td>

<td><input type="text" name="phone"></td>

<td>

</td>
</tr>

</tr>

</table>

</form>
<script src="q3.js"></script>

</body>
</html>

JS CODE:
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 number";

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

registration 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 than 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 behavior 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.
CODE:

</head>

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>

<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>

</html>

JS CODE:
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.
CODE:
LEFT:
<html>

</script>

</head>
<body>

Number of tickets<input type="number" name="" id="count">

<br>

<input type="submit" onclick="check()">

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:
<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>

<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>

</tr>

<tr>

</tr>

<tr>

<td>Gender</td>
<td>Count</td>

</tr>

<tr>

<option >Female</option>

</select>

</td>

</td>

</tr>

<tr>

<td align="right"><input type="submit"></td>

</form>
</table>
</div>

</body>
</html>
TOP:
<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">
<h1 align="center">Online Railway Reservation System</h1>

</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.

CODE:
HTML CODE:
<html>

<head>

</head>
<body>

<table>

<thead>
<tr>
<th>First Name</th>

<th>State</th>
</tr>

</thead>

<tbody>
<tr>
<td>Mannix</td>

<td>Bolton</td>

<td>Merizo</td>

<td>Michigan</td>
</tr>

<tr>

<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>

</body>

</html>

jQuery CODE:
$("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:

CODE
HTML CODE:
<html>
<head>

.btns {
margin-right: 4px;

</style>
</head>
<body>

Divisible by :
<input type="number" id="query">

<input type="submit" onclick="divide()" value="delete">

<br> Click A Button :

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.
These screenshots show the state after items have been added and the state after
itemshave been removed.
CODE:

HTML CODE:
<html>

<head>

<style>

li:nth-child(2n) {
background: yellow;
}

#list {

width: 200px;
}

</style>

</head>
<body>

<h1>My super nifty to-do list</h1>

<input type="text" id="inputField">

<input type="submit" value="remove" onclick="remove()">

JS CODE:
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.
CODE:
<html>

<head>

#break1{

position: absolute;

border-bottom:2px dashed black;

width:130px;}

#break2{

position: absolute;

border-bottom:2px dashed black;

width:300px;}

.right{

text-align:right;}

#image{

top:10px;

padding: 30px 100px 39px 70px;

position:absolute;

background-color:#4E5A66;

#head{

left:150px;

font-family:Arial;

color:white;

position:absolute;

width:750px;

font-size:50px;

top:10px;

padding: 20px 20px 40px 0px;

background-color:#4E5A66;

#middle{
position:absolute;

top:125px;}

#foot{

padding: 20px 20px 20px 100px;

width:800px;

background-color:#4E5A66;

position:absolute;

</style>

</script>

var

cities={"UttarPradesh":["Lucknow","Kanpur","Ghaziabad","Agra"],"MadhyaPradesh":["Indore",
"Bhopal",

"Jabalpur","Ujjain"]};

</script>

var k=0,len=0,max=0,match="",c=0;

$(function()

if($("#autocomp").text()=="")

$("#autocomp").hide();

for(i in cities)

var opt=$("<option></option>").text(i);

opt.attr("value",i);

$("#states").append(opt);

$("#city").keyup(function(){

var state=$("#states").val();

for(j in cities)
{

if(j==state)

//alert(cities[j]);

for(k in cities[j])

//alert($("#city").val().length);

if(cities[j][k].length<$("#city").val().length)

len=cities[j][k].length;

else

len=$("#city").val().length;

//alert(len);

for(var m=0;m<len;m++)

//alert($("#city").val()[m]+" vs

"+cities[j][k][m]);"

if($("#city").val()[m]==cities[j][k][m])

c++;

if($("#city").val()[m]!=cities[j][k][m])

break;

if(c>max)

match=cities[j][k];

c=0;
}

$("#autocomp").show();

$("#autocomp").text(match);

if($("#city").val()=="")

$("#autocomp").text("");

$("#autocomp").hide();

});

$("#autocomp").click(function(){

$("#city").val($("#autocomp").text());

});

$("#sub").click(function(){

var bool=true;

if($("#fname").val()==""||$("#lname").val()==""||$("#mail").val()==""||$("#city").val()==""||$("#
states"

).val()==null||$("#zip").val()==""||$("#meal").val()==null)

alert("All Fiels and Mandatory");

bool=false;

if($("#zip").val().test(/^d{5}$/)==null)

alert("Zip code should be exactly five digits");

bool=false;

if(bool)

$("#form1").submit();

else

{
$("#form1").reset();

});

</script>

</head>

<img

src="https://www.bostonhigashi.org/UserFiles/Servers/Server_5286763/Image/Calendars
/calicon.png"

height="50" width="50" />

</span>

Event Registration Form

</span>

<br>

<form name="form1" id="form1" action="">

<table>

<tr>

<td class="right">First Name</td>

<td><input type="text" id="fname" /></td>

</tr>

<tr>

<td class="right">Last Name</td>

<td><input type="text" id="lname" /></td>

</tr>

<tr>

<td class="right">Mailing Address</td>

<td><input type="email" id="mail" /></td>

</tr>

<tr>

</tr>

<tr>

<td class="right">State</td>

<option selected disabled>Choose</option>

</select></td>

</tr>

<tr>

<td class="right">Zip Code</td>

<td><input type="text" id="zip" /></td>

</tr>

<tr>

</tr>

<tr>

<td class="right">Are you speaking at<br>the conference?</td>

<td>

<input type="radio" name="speak" value="yes" checked />Yes<input type="radio"

name="speak"

value="no" />No</td>

</tr>

<tr>

<td class="right">Conference Pass</td>

<td><input type="radio" name="pass" checked />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></tr>

<tr>

</tr>

<tr>
<td>Meal Preference</td>

<td><select name="meal" id="meal">

<option selected disabled value="Choose">Choose</option>

<option value="veg">Vegetarian</option>

<option value="nonveg">Non Vegetarian</option>

</select></td>

<tr>

</table>

<input type="submit" value="Submit" name="Submit" id="sub" form="form1"/>

</div>

</form>

</div>

</body>

</html>

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.
CODE:
<html>
<title>19BIT0348</title>
<style media="screen">

.checkIt{

display:flex;
}

.quantity{

margin-left: 20px;

.inputPayment,.totalPayment{
width:35%;

.buttons{
}
.main_form{

width:550px;

padding:15px;

border:2px solid blue;

}

label{

margin-top:50px;
}

th,td{
padding:5px;

</style>

<form method="POST" action="">

<label for="myname">User name</label>

</div>

<br />

<label for="checkbox">Select the items:</label><br><br>

<input id="check1" type="checkbox" name="b[]" checked="checked"/>

<label for="">Four 100 watt light bulbs for Rs.20.39 </label><br />

<input id="check2" type="checkbox" name="b[]">

<label for="">Eight 100 watt light bulbs for Rs.40.20</label><br />

<label>Four 100 watt long life bulbs for Rs.30.95 </label><br />

<input id="check4" type="checkbox" name="b[]">

<label>Eight 100 watt long life bulbs for Rs.70.49 </label><br />

</div>

<div class="quantity">
<label for="checkbox">Quantity</label><br><br>

<input id="1" type="number" min="0" class="inputPayment"><br />

<input id="4" type="number" min="0" class="inputPayment"><br />

</div>
</div>
<br />

<div class="payment">
<label for="">Select the mode of the payment</label><br />
<input id="visa" type ="radio" name="paymode" value="visa"
checked="checked"
class="checkbox_check"/>

<label >Visa</label><br />

<input id="master_card" type ="radio" name="paymode" value="Master card"

class="checkbox_check"/>
<label >Master Card</label><br />

<input type ="radio" name="paymode" value="Discover" class="checkbox_check"

id="discover"/>

<label >Discover</label><br />

<input type="button" value="Submit" id="submit"/>

<input id="reset" type="reset" value="Reset"/>

</div>
</div>

</div>
</form>

<div style="opacity:0" id="table">

<h2>You have ordered the following</h1>

<table border="2" width="480px">

<thead>

<th width="65%">Item</th>
<th>Qty</th>
<th>Price</th>

<th>Total</th>

</thead>
<tbody>

<tr>

<td>Four 100 watt light bulbs for Rs.20.39</td>

<tr>

<td>Eight 100 watt light bulbs for Rs.40.20</td>

</tr>

<tr>
<td>Four 100 watt long life bulbs for Rs.30.95 </td>

<tr>

<td>Eight 100 watt long life bulbs for Rs.70.49 </td>

</tbody>

</table>

<br>

</div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></scr
ipt>

$(document).ready(function(){
$("input submit").on("click",function(){

$("").each(function(){

if ($('input checkbox_check').not('checked')){
$(this).val();

$("input inputPayment").val("0");

console.log($("input inputPayment").val());
}

});

});
$("#submit").click(function(){

var x= $("#username").val();

console.log(x);

$("#contents").text("User Name:"+x);
$("#table").css("opacity","1");

var a = $("#1").val();

var b = $("#2").val();

var c = $("#3").val();
var d = $("#4").val();

if($("#check1").is(':checked')){

$("#1st").text(a);

else{

var a = 0;
$("#1st").text("0");

if($("#check2").is(':checked')){

$("#2nd").text(b);

else{
var b = 0;

$("#2nd").text("0");
}
if($("#check3").is(':checked')){

$("#3rd").text(c);
}
else{
var c = 0;

$("#3rd").text(c);
}
if($("#check4").is(':checked')){

$("#4th").text(d);

else{
var d = 0;

$("#4th").text(d);

var radio="";
if($('#visa').is(':checked')) {

radio = "Visa";

if($('#master_card').is(':checked')){
radio = "Master card";

if($('#discover').is(':checked')){

radio = "Discover";

var tot1 = 20.39*a;

var tot2 = 40.2*b;

var tot3 = 30.95*c;

var tot4 = 70.49*d;

$("#total1").text(tot1);

$("#total2").text(tot2);

$("#total3").text(tot3);
$("#total4").text(tot4);

var e = tot1+tot2+tot3+tot4;
console.log(e);
var f = 0.135*e;

var tax = e+0.135*e;

$("#tax_value").text("Total bill includig 13.5% tax:"+tax+"(tax is :Rs
"+f+")"+" paymentmode:"+radio);});
$("#reset").click(function(){

$("#table").css("opacity","0");

});
</script>
</body>

</html>

OUTPUT:

Quiz 1 Section 2
63% (8)
Quiz 1 Section 2
24 pages
Web Technologies Assessment 2
75% (4)
Web Technologies Assessment 2
26 pages
Shreyas Guduri 19Bct0046 Iwp Lab Da2
No ratings yet
Shreyas Guduri 19Bct0046 Iwp Lab Da2
41 pages
Name - Sanjay Nithin S REG NO - 20BIT0150
No ratings yet
Name - Sanjay Nithin S REG NO - 20BIT0150
29 pages
Assignment 2 Web
No ratings yet
Assignment 2 Web
14 pages
Model Question
No ratings yet
Model Question
6 pages
Web Application 1-12 Program & Output
No ratings yet
Web Application 1-12 Program & Output
28 pages
HTML B.scprograms
No ratings yet
HTML B.scprograms
55 pages
HTML Css File
No ratings yet
HTML Css File
21 pages
Exp-7 & EXP-9
No ratings yet
Exp-7 & EXP-9
25 pages
JKLMN
No ratings yet
JKLMN
17 pages
LAB
No ratings yet
LAB
15 pages
CSS Prac Exam Ans
No ratings yet
CSS Prac Exam Ans
26 pages
WP Practical Sample Questions Solutions
No ratings yet
WP Practical Sample Questions Solutions
16 pages
Web Design Manual-Printout
No ratings yet
Web Design Manual-Printout
13 pages
15BCA0037 WD (Exercise 3) PDF
100% (1)
15BCA0037 WD (Exercise 3) PDF
25 pages
Js Lab
No ratings yet
Js Lab
8 pages
Web Tech
No ratings yet
Web Tech
14 pages
Web Tech
No ratings yet
Web Tech
32 pages
SR - No. Experiment Page No. Date Marks Signature From To
No ratings yet
SR - No. Experiment Page No. Date Marks Signature From To
119 pages
Bikesh Shrestha
No ratings yet
Bikesh Shrestha
5 pages
Web Design
No ratings yet
Web Design
30 pages
Web Essential Lab
No ratings yet
Web Essential Lab
39 pages
Css Q B PTT 2 Question Bank
No ratings yet
Css Q B PTT 2 Question Bank
19 pages
WT Coverpage
No ratings yet
WT Coverpage
11 pages
WEB ESSENTIAL LAB New
No ratings yet
WEB ESSENTIAL LAB New
14 pages
WT Practical 2
No ratings yet
WT Practical 2
18 pages
Web Tech Practical File
No ratings yet
Web Tech Practical File
18 pages
Experimentes
No ratings yet
Experimentes
59 pages
CSS PR QB
No ratings yet
CSS PR QB
28 pages
Simple Lab
No ratings yet
Simple Lab
19 pages
HTML Assignment
No ratings yet
HTML Assignment
31 pages
WOT Practicle File: Manjotpal Singh UE188058 4 SEM It Section-1 (Gp-3)
No ratings yet
WOT Practicle File: Manjotpal Singh UE188058 4 SEM It Section-1 (Gp-3)
36 pages
Anurag Final WD File
No ratings yet
Anurag Final WD File
46 pages
Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023
No ratings yet
Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023
15 pages
Lab 4
No ratings yet
Lab 4
40 pages
Project
No ratings yet
Project
9 pages
Web Tech File
No ratings yet
Web Tech File
25 pages
WT LAB MANUAL-MIT
No ratings yet
WT LAB MANUAL-MIT
24 pages
Lab 01
No ratings yet
Lab 01
6 pages
WP 10 prgm-1
No ratings yet
WP 10 prgm-1
12 pages
WP 20 PRGM
No ratings yet
WP 20 PRGM
26 pages
WP 10 prgm-2
No ratings yet
WP 10 prgm-2
15 pages
Information Technology Management: Web Based Programming 313
No ratings yet
Information Technology Management: Web Based Programming 313
55 pages
Css-Internal and External Programs - 2024
No ratings yet
Css-Internal and External Programs - 2024
22 pages
Webtech File
No ratings yet
Webtech File
15 pages
Iwt Practical
No ratings yet
Iwt Practical
20 pages
Preeti Kumari 22SCSE1012771 Sec-37 (P2)
No ratings yet
Preeti Kumari 22SCSE1012771 Sec-37 (P2)
40 pages
Practical 9: Name: Aniket Deshmukh Batch: B Rollno: 13 Sub: CSS
No ratings yet
Practical 9: Name: Aniket Deshmukh Batch: B Rollno: 13 Sub: CSS
19 pages
Javascript Get Date Methods: Method Description
No ratings yet
Javascript Get Date Methods: Method Description
4 pages
Web Lab Manual2021
No ratings yet
Web Lab Manual2021
22 pages
Web Technologies Lab Manual: Prepared by
89% (9)
Web Technologies Lab Manual: Prepared by
102 pages
JWT Labmanual For MTech FINAL One
No ratings yet
JWT Labmanual For MTech FINAL One
79 pages
VL2019201002556 Ast03
No ratings yet
VL2019201002556 Ast03
6 pages
Sukruthi WT Week5
No ratings yet
Sukruthi WT Week5
15 pages
Webdesign
No ratings yet
Webdesign
16 pages
WP Practicals 200020107537 PDF
100% (1)
WP Practicals 200020107537 PDF
119 pages
Client Side Web Development For Beginners (HTML/CSS/JS)
From Everand
Client Side Web Development For Beginners (HTML/CSS/JS)
Maks Uri
4/5 (1)
Building a Poll Builder Web App with Vanilla HTML, CSS, and JavaScript.: A Practical Q&A Guide Using a Poll Builder
From Everand
Building a Poll Builder Web App with Vanilla HTML, CSS, and JavaScript.: A Practical Q&A Guide Using a Poll Builder
Lumavalle Press
No ratings yet
Building a Tip Calculator Web App with Vanilla HTML, CSS, and JavaScript.: A Practical Q&A Guide Using a Tip Calculator
From Everand
Building a Tip Calculator Web App with Vanilla HTML, CSS, and JavaScript.: A Practical Q&A Guide Using a Tip Calculator
Lumavalle Press
No ratings yet
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
Ooad 2m+i
No ratings yet
Ooad 2m+i
2 pages
FastMM4 Readme
No ratings yet
FastMM4 Readme
4 pages
Unit 1
No ratings yet
Unit 1
62 pages
Game of Nim Code
No ratings yet
Game of Nim Code
5 pages
2022-23 F.Y.B.Sc (Computer Science) (CBCS)
No ratings yet
2022-23 F.Y.B.Sc (Computer Science) (CBCS)
8 pages
Structures Functions
No ratings yet
Structures Functions
13 pages
Syed Qasim Technical Lead
No ratings yet
Syed Qasim Technical Lead
3 pages
Acceptance Testing Report - Persian
No ratings yet
Acceptance Testing Report - Persian
8 pages
A Guided Tour of WPF
No ratings yet
A Guided Tour of WPF
28 pages
Inheritance, Abstract and Package
No ratings yet
Inheritance, Abstract and Package
84 pages
Throws Clause in Java - Exception Handling: Throws Keyword Is Used For Handling Checked Exceptions
No ratings yet
Throws Clause in Java - Exception Handling: Throws Keyword Is Used For Handling Checked Exceptions
3 pages
22F7470 Lab11
No ratings yet
22F7470 Lab11
9 pages
06 - 01 - TestNG Tutorial Annotations
No ratings yet
06 - 01 - TestNG Tutorial Annotations
41 pages
Comprehensive - PowerShell - Guide - For - New - and - Seasoned - Admins
No ratings yet
Comprehensive - PowerShell - Guide - For - New - and - Seasoned - Admins
21 pages
REA Technical Proposal
No ratings yet
REA Technical Proposal
4 pages
CBT Manual N-Scheme
No ratings yet
CBT Manual N-Scheme
48 pages
Ada Plus Data Structures 1St Edition by Nell Dale, Susan Lilly, John Mccormick Isbn 9780763737948
100% (7)
Ada Plus Data Structures 1St Edition by Nell Dale, Susan Lilly, John Mccormick Isbn 9780763737948
83 pages
Notes For Web Scraping - BeautifulSoup-3903
No ratings yet
Notes For Web Scraping - BeautifulSoup-3903
6 pages
Chapter 2 - ISTQB CTFL - Foundation Level
100% (1)
Chapter 2 - ISTQB CTFL - Foundation Level
2 pages
Public Class Form1
100% (1)
Public Class Form1
3 pages
Comp 348
No ratings yet
Comp 348
7 pages
F3 CL Javascipt L1
No ratings yet
F3 CL Javascipt L1
6 pages
Y11 Mock Mark Scheme 2023
No ratings yet
Y11 Mock Mark Scheme 2023
8 pages
Aparajita Pune
No ratings yet
Aparajita Pune
4 pages
Vrealize Suite 2019 Overview
No ratings yet
Vrealize Suite 2019 Overview
44 pages
XML Quiz Results
No ratings yet
XML Quiz Results
8 pages
Implement All File Organization Techniques
No ratings yet
Implement All File Organization Techniques
12 pages
Chapter 6 Case Nokia
No ratings yet
Chapter 6 Case Nokia
3 pages
Angular 2 Building Blocks Handson
0% (1)
Angular 2 Building Blocks Handson
9 pages

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.