WAD MNUL 6 To 11

6.
Hostel Application Form

Task: Style the Hostel Application Form designed in Module-5still more beautiful using
Bootstrap CSS (Re-size browser and check how the webpage displays in mobile
resolution)
Aim:To Style the Hostel Application Form designed in Module-5still more beautiful by
using Bootstrap CSS.
Description:
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
h1{
font-family:sans-serif;
font-size:24px;
font style:normal;
color:blue;
text-align="center";
text-decorate:underline;
}
table{
height:300;
font-family:verdana;
color: black;
font-size:16px;
font style:normal;
font-weight:bold;
background:linear-gradient(to buttom,#33ccff 0%,#ff99cc 100%);
border-collapse;
border: 4px solid #000000;
border-style: dashed;
}
table.inner{
border: 10px
}
</style>
<title>Application Form</title>
</head>
<body align="center">
<h1>Annamacharya Hostel<h1>
<h1>Student Hostel Application Form</h1>
<form >
<table align="center" bgcolor="pink" height="500" width="500">

<tr>
<td>Name of the Student:</td>
<td>
<input type="text" placeholder="Name of the student" name="">
</td>
</tr>
<tr>
<td>Father's Name:</td>
<td>
<input type="text" placeholder="Father's Name" name="">
</td>
</tr>
<tr>
<td>Adm. Fee Receipt no:</td>
<td>
<input type="number" placeholder="1234***">
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td>
<input type="phone" placeholder="9867******">
</td>
</tr>
<tr>
<td>Email Id:</td>
<td>
<input type="email" placeholder="example1@*8">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" placeholder="Password">
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td>
<input type="date">
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox"singing>singing
<input type="checkbox"Dancing>Dancing
<input type="checkbox"playing>playing
</td>
</tr>
<tr>
<td>Sizing</td>
<td>
<input class="form-control-lg" type="text" placeholder="Large input">
<select class="form-control-lg">
<option>Large select</option>
</select>
<input class="form-control" type="text" placeholder="Default input">
<select class="form-control">
<option>Default select</option>
</select>
<input class="form-control-sm" type="text" placeholder="Small input">
<select class="form-control-sm">
<option>Small select</option>
</select>
</td>
</tr>
<tr>
<td>Education Qualification:</td>
<td>
<select>
<option>Select Option</option>
<option>10+2</option>
<option>Graduation</option>
<option>Post graduation</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea rows="5" col="17" placeholder="Address"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="submit" value="Print">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
Annamacharya Hostel
Student Hostel Application Form
Result:
Hence, the Hostel Application Form designed in Module -5 is styled more
beautifully by using Bootstrap CSS is successful.
7. Analyse various HTTP requests &Identifing problems
Task: Analyse various HTTP requests (initiators, timing diagrams, responses) and identify
problems if any.
Aim: To Analyse various HTTP requests and to identify problems.
Description:
HTTP is a transfer protocol used by the World Wide Web distributed hypermedia system
to retrieve distributed objects. HTTP uses TCP as a transport layer. Certain design features
of HTTP interact badly with TCP, causing problems with performance and with server
scalability. Latency problems are caused by opening a single connection per request,
through connection setup and slow-start costs. Further avoidable latency is incurred due to
the protocol only returning a single object per request. Scalability problems are caused by
TCP requring a server to maintain state for all recently closed connections.
Summary of HTTP/1.0
HTTP[http]is a transfer protocol used by the World Wide Web to retrieve information
from distributed servers. The HTTP model is extremely simple; the client establishes a
connection to the remote server, then issues a request. The server then processes the
request, returns a response, and closes the connection.
Requests
The request format for HTTP is quite simple. The first line specifies an object, together
with the name of an object to apply the method to. The most commonly used method is
"GET", which ask the server to send a copy of the object to the client.
The client can also send a series of optional headers; these headers are in RFC-822 format.
The most common headers are "Accept", which tells the server which object types the
client can handle, and "User-Agent", which gives the implementation name of the client.
Request syntax
<METHOD><URI> "HTTP/1.0" <crlf>
{<Header>: <Value><crlf>}*
<crlf>
Example
GET /index.html HTTP/1.0
Accept: text/plain
Accept: text/html
Accept: */*
User-Agent: Yet Another User Agent
Responses
The response format is also quite simple. Responses start with a status line indicating
which version of HTTP the server is running, together with a result code and an optional
message.
This is followed by a series of optional object headers; the most important of these are
"Content-Type", which describes the type of the object being returned, and "Content-
Length", which indicates the length.The headers are teminated by an empty line.
The server now sends any requested data. After the data have been sent, the server drops
the connection.
Response syntax
"HTTP/1.0" <result-code> [<message>] <crlf>
{<Header>: <Value><crlf>}*
<crlf>
Example
HTTP/1.0 200 OK
Server: MDMA/0.1
MIME-version: 1.0
Content-type: text/html
Last-Modified: Thu Jul 7 00:25:33 1994
Content-Length: 2003
<title>MDMA - Multithreaded Daemon for Multimedia

Access</title>
<hr> ....
<hr>
<h2> MDMA - The speed daemon </h2>
<hr>
[Connection closed by foreign host]
HTTP Illustrated
The problems with HTTP can best be understood by looking at the network traffic
generated by a typical HTTP transaction. This example was generated by using Van
Jacobsen's tcpdump program to monitor a client at UNC fetching a copy of the NCSA
Home page. This page is 1668 bytes long, including response headers. The client at UNC
was a Sun Sparcstation 20/512, running Solaris 2.3. The server at NCSA was a Hewlett
Packard 9000/735 running HP-UX.
The headers used in the request shown were captured from an xmosaic request. The
headers consisted of 42 lines totaling around 1130 bytes; of these lines, 41 were "Accept".
Stage 1: Time = 0
The trace begins with the client sending a connection request to the http port on the server
.00000 unc.32840 > ncsa.80: S 2785173504:2785173504(0) win

8760 <mss 1460> (DF)
Stage 2: Time = 0.077

The server responds to the connect request with a connect response. The client
acknowledges the connect response, and send the first 536 bytes of the request.
.07769 ncsa.80 > unc.32840: S 530752000:530752000(0) ack

2785173505 win 8192
.07784 unc.32840 > ncsa.80: . ack 1 win 9112 (DF)
.07989 unc.32840 > ncsa.80: P 1:537(536) ack 1 win 9112 (DF)

The server acknowledges the first part of the request. The client then sends the second
part, and without waiting for a response, follows up with the third and final part of the
request.
.35079 ncsa.80 > unc.32840: . ack 537 win 8192
.35092 unc.32840 > ncsa.80: . 537:1073(536) ack 1 win 9112
(DF)
.35104 unc.32840 > ncsa.80: P 1073:1147(74) ack 1 win 9112
(DF)

The server sends a packet acknowledging the second and third parts of the request, and
containing the first 512 bytes of the response. It follows this with another packet
containing the second 512 bytes. The client then sends a message acknowledging the first
two response packets.
.45116 ncsa.80 > unc.32840: . 1:513(512) ack 1147 win 8190
.45473 ncsa.80 > unc.32840: . 513:1025(512) ack 1147 win
8190

The server sends the third and fourth response packet. The fourth packet also contains a
flag indicating that the connection is being closed. The client acknowledges the data, then
sends a message announcing that it too is closing the connection. From the point of view
of the client program, the transaction is now over.
.52521 ncsa.80 > unc.32840: . 1025:1537(512) ack 1147 win
8190
.52746 ncsa.80 > unc.32840: FP 1537:1853(316) ack 1147 win
8190
.52876 unc.32840 > ncsa.80: F 1147:1147(0) ack 1854 win 9112
(DF)

The server acknowledges the close.
.59904 ncsa.80 > unc.32840: . ack 1148 win 8189
This trace is quite revealing. It seems that HTTP spends more time waiting than it does
transferring data. Before we take a look at what causes these delays, we'll calculate a
couple of metrics that will help us work out what's going on.
One important metric is the Round Trip Time (RTT). This is the time taken to sent a
packet from one end of the connection to the other and back. Look at the gap between
stages one and two, and between stages five and six, we can see that in our example, the
RTT is around 70 milliseconds.
Another important metric is the bandwidth of the connection. This is a measure of how
many bits per second our connection can carry. We can establish a lower bound on the
available bandwidth by noting how long it took to send one of the data packets.
The two data packets in stage four arrive with a gap of 3.57 ms; since each packet carries
512 bytes of data, this puts a lower limit on the available bandwidth of about 1.15 Mbps
(143,750 MBps).
Connection Establishment
TCP establishes connections via a three-way handshake. The client sends a connection
request, the server responds, and the client acknowledges the response. The client can send
data along with the acknowledgement.
Since the client must wait for the server to send its connection response, this procedure
sets a lower bound on the transaction time of two RTTs.
Data transfer: Segments

When TCP transfers a stream data, it breaks up the stream into small segments. The size of
each segment can vary up to a maximum segement size (MSS). Although the segment size
can be negotiated (the UNC host advertises an MSS of 1460 bytes in the first packet), this
negotiation is optional. For remote connections, the MSS defaults to 536 bytes.
Since the NCSA host did not advertise an MSS, the UNC host uses the default value of
536 for this session.
Data transfer: Windows and Slow Start

Instead of having to wait for each packet to be acknowledged, TCP allows the sender to
send out new segments even though it may not have received acknowledgements for
previous segments.
To prevent the sender from overflowing the receivers buffers, in each segment the receiver
tells the sender how much data it is prepared to accept without acknowledgments. This
value is known as the window size.
Although the window size tells the sender the maximum amount of unacknowledged data
the receiver is prepared to let it have outstanding, the receiver cannot know how much data
the connecting networks are prepared to carry. If the network is quite congested, sending a
full windows worth of data will cause even worse congestion. The ideal transmission rate
is one in which acknowledgements and outgoing packets enter the network at the same
rate.
TCP determines the best rate to use through a process called Slow Start. With Slow Start,
the sender maintains calculates a second window of unacknowledged segments known as
the Congestion Window. When a connection first starts up, each sender is only allowed to
have a single unacknowledged segement in transit. Every time a segment is acknowledged
without loss, the congestion window is opened; every time a segement is lost and times
out, the window is closed.
This approach is ideal for normal connections; these connections tend to last a relatively
long time, and the effects of slow start are negligible. However, for short lived connections
like those used in HTTP, the effect of slow start is devestating.
How Slow Start affects HTTP
HTTP is hurt by slow start on both the client and server sides. Because the HTTP headers
are longer than the MSS, the client TCP needs to use two segments (Stage 2). Because the
congestion window is initialised to one, we need to wait for the first segment to be
acknowledged before we can send the second and third (Stage 3). This adds an extra RTT
onto the minimum time for the transaction.
When the server is ready to send the response, it starts with a congestion window set to 2.
This is because the acknowledgement it sent in Stage 3 counts is counted as a successful
transmission, allowing the congestion window to open up a notch before it comes time to
send data.
Although the servers congestion window is already slightly open, it still doesn't have
enough a big enough gap to send the entire response without pausing. In Stage 4, the
server sends two segments carrying a combined 1K of data, but then needs to wait to
receive the acknowledgement from the client before it can send the final two segments in
Stage 5.
Since most pages are larger than 1K in size, slow start in the server will typically add at
least one RTT to the total transaction time. Longer documents may experience several
more slow start induced delays, until the congestion window is as big as the recievers
window.
Readers should note that if the server were to support the negotition of larger MSS, this
particular transaction would not have incurred any slow start delays. However, typical
document sizes will cause at least one slow start pause when sending the result.
Latency and Bandwidth

Latency and Bandwidth are the two keys to protocol performance. Latency, as measured
by the RTT, is a measure of the fixed costs of a transaction and does not change as
documents get bigger or smaller. Bandwidth, as we discussed earlier, is a measure of how
long it takes to send data.
Future Networks
Improving available bandwidth is relatively easy. All you need to do is buy a faster
network. Reducing latency is somewhat harder- there are only two known ways to achieve
this; either change the speed of light, or move. Since placing workstations in particle
accelerators has been known to cause data loss, and since the second approach is in
general contrary to the philosphy of distributed systems, latency is increasingly becoming
the dominant factor in protocol performance.
Effects of opening new connection per transaction

The cost of opening a new connection for each transaction can be clearly seen by
estimating the transaction time as it would have been if we had been reusing an existing
connection.
In our example, the total transaction time was 530 ms
If were reusing an existing connection the transaction time could be calculated as the time
to send the request plus the round trip time, plus any processing time on the server, plus
the time to send the response. The only figure in this list for which we have no estimate is
that for server processing time. This depends heavily upon machine load, but for our
purposes, we can take the gap between sending the request and recieving the response, and
subtract the response time (Stages 3 and 4). In this case, the approximate value is about 30
ms.
Using the above method, the expected transaction time for an already open server would
be (1,146 / 143,750) + 0.07 + 0.03 + (1854 / 143,750), or abour 120 ms.
Effects Of Requesting A Single Object Per Transaction

Because HTTP has no way to ask for multiple objects with a single request, each fetch
requires a single transaction. With the current protocol, this would require a new
connection to be set up; however, even if the connection were to be kept open, each
request/response pair would incur a separate round trip delay.
As an example, lets consider fetching ten documents, each the same size as the one we've
been considering. For HTTP/1.0, the total time would be 5,300 ms. For the long-lived
connection, the total transaction time will be 1,200 ms.
Ignoring any possible savings in header size and processing time, if we were to combine
all the requests and responses into a single message, the total transaction time would be 10
* (3000/143,750) + 0.07 + (0.03 * 10), or 580 ms. If we assume that the optional headers
are only sent once, then the total time per transaction is 520ms. In this model, processing
time is the dominant factor. If we further assume that a proportion of processing time is
independent of the number of objects requested, then the total time can be as low as 250ms
(150ms transfer, 70ms latency, 30ms processing time).
On a gigabit network, the transfer time becomes insignificant. On such a network, the total
time for the sequence of HTTP/1.0 requests would be approximately 5,100ms. If multiple
objects per request were allowed over an already open channel, the total time would be
100ms.
Other Problems
One scalability problem caused by the single request per connection paradigm occurs due
to TCP's TIME_WAIT state. When a server closes a TCP, connection, it is required to
keep information about that connection for a period of time, in case a delayed packet turns
up and sabotages a new incarnation of the connection.
The recommended time to keep this information is 240 seconds. Because of this, a server
will leave some resources allocated for every single connection closed in the past four
minutes. On a busy server, this can add up to thousands of control blocks.
Summary
HTTP/1.0 interacts badly with TCP. It incurs frequent round-trip delays due to connection
establishment, performs slow start in both directions for short duration connections, and
incurs heavy latency penalties due to the mismatch of the typical access profiles with the
single request per transaction model. HTTP/1.0 also requires busy servers to dedicate
resources to maintaining TIME_WAIT information for large numbers of closed
connections.
RESULT :
Hence, various HTTP requests and problems have been Identified and Analysed
Successfully.
8. simple calculator using JavaScript
Task: Design a simple calculator using JavaScript to perform sum, product, difference,
and quotient operations.
Aim: To Design a simple calculator using JavaScript to perform sum, product,
difference, and quotient operations.
Description:
Program:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">

<input id = "calc" type ="text" name = "answer"> <br> <br>


<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>

<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>

<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">

<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer

.value) ">
<br>

<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "c
lear" >
<br>
</form>
</div>
</body>
</html>
Output:
Result: Hence, a Simple Calculator by using JavaScript has been designed

Successfully.
9.Shopping Cart Application
Task: Design& develop a Shopping Cart Application with features including Add
Products, Update Quantity, Display Price(Sub-Total & Total), Remove items/products
from the cart.
Aim: To Design& develop a Shopping Cart Application with features including Add
Products, Update Quantity, Display Price(Sub-Total & Total), Remove items/products
from the cart.
Description:
HTML
Step 1: Let’s create our HTML structure.
• First, we need a container div, which we’ll call “.shopping-cart”.
• Inside the container, we will have a title and three items which will include:
• two buttons — delete button and favorite button
• product image • product name and description
• buttons that will adjust quantity of products
• total price
CSS
• Now, let’s add some style to our body now let’s make our Shopping Cart to be 750×423
and style it to look nice.
• Notice that we are using flexbox, so we set it to display flex and make the flex direction
column, because by default the flex direction is set as row.
• Next, let’s style the first item, which is the title, by changing the height to 60px and
giving it some basic styling, and the next three items which are the shopping cart products,
will make them 120px height each and set them to display flex.
• The first elements are the delete and favorite buttons.
• I’ve always loved Twitter’s heart button animation
• We set class “is-active” for when we click the button to animate it using jQuery, but this
is for the next section.
• Next, is the product image which needs a 50px right margin.
• Then we need to add a quantity element, where we have two buttons for adding or
removing product quantity. First, make the CSS and then we’ll make it work by adding
some JavaScript.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shopping Cart</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">

<script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<div class="shopping-cart">

<div class="title">
Shopping Bag
</div>


<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<imgsrc="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<imgsrc="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<imgsrc="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$549</div>
</div>


<div class="item">
</div>
<div class="image">
<imgsrc="item-2.png" alt=""/>
</div>
<span>MaisonMargiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
</button>
</button>
</div>
</div>


<div class="item">
</div>
<div class="image">
<imgsrc="item-3.png" alt="" />
</div>
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
</button>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$('.minus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.closest('div').find('input');
var value = parseInt($input.val());
if (value > 1) {
value = value - 1;
} else {
value = 0;
}
$input.val(value);
});
$('.plus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.closest('div').find('input');
var value = parseInt($input.val());
if (value < 100) {

value = value + 1;
} else {
value =100;
}
$input.val(value);
});
$('.like-btn').on('click', function() {
$(this).toggleClass('is-active');
});
</script>
</body>
</html>
Note:
Save the above program with .html extension.
Css code:
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
*{
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
padding: 10px;
margin: 0;
background-color: #7EC855;
font-family: 'Roboto', sans-serif;
}
.shopping-cart {
width: 750px;
height: 423px;
margin: 80px auto;
background: #FFFFFF;
box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
border-radius: 6px;
display: flex;
flex-direction: column;
}
.title {
height: 60px;
border-bottom: 1px solid #E1E8EE;
padding: 20px 30px;
color: #5E6977;
font-size: 18px;
font-weight: 400;
}
.item {
padding: 20px 30px;
height: 120px;
display: flex;
}
.item:nth-child(3) {
border-top: 1px solid #E1E8EE;
border-bottom: 1px solid #E1E8EE;
}
/* Buttons - Delete and Like */

.buttons {
position: relative;
padding-top: 30px;
margin-right: 60px;
}
.delete-btn {
display: inline-block;
cursor: pointer;
width: 18px;
height: 17px;
background: url("delete-icn.svg") no-repeat center;
margin-right: 20px;
}
.like-btn {
position: absolute;
top: 9px;
left: 15px;
display: inline-block;
background: url('twitter-heart.png');
width: 60px;
height: 60px;
background-size: 2900%;
background-repeat: no-repeat;
cursor: pointer;
}
.is-active {
animation-name: animate;
animation-duration: .8s;
animation-iteration-count: 1;
animation-timing-function: steps(28);
animation-fill-mode: forwards;
}
@keyframes animate {
0% { background-position: left; }
50% { background-position: right; }
100% { background-position: right; }
}
/* Product Image */
.image {
margin-right: 50px;
}
/* Product Description */
.description {
padding-top: 10px;
margin-right: 60px;
width: 115px;
}
.description span {
display: block;
font-size: 14px;
color: #43484D;
font-weight: 400;
}
.description span:first-child {
margin-bottom: 5px;
}
.description span:last-child {
font-weight: 300;
margin-top: 8px;
color: #86939E;
}
/* Product Quantity */
.quantity {
padding-top: 20px;
margin-right: 60px;
}
.quantity input {
-webkit-appearance: none;
border: none;
text-align: center;
width: 32px;
font-size: 16px;
color: #43484D;
font-weight: 300;
}
button[class*=btn] {
width: 30px;
height: 30px;
background-color: #E1E8EE;
border-radius: 6px;
border: none;
cursor: pointer;
}
.minus-btnimg {
margin-bottom: 3px;
}
.plus-btnimg {
margin-top: 2px;
}
button:focus,
input:focus {
outline:0;
}
/* Total Price */
.total-price {
width: 83px;
padding-top: 27px;
text-align: center;
font-size: 16px;
color: #43484D;
font-weight: 300;
}
/* Responsive */
@media (max-width: 800px) {
.shopping-cart {
width: 100%;
height: auto;
overflow: hidden;
}
.item {
height: auto;
flex-wrap: wrap;
justify-content: center;
}
.image img {
width: 50%;
}
.image,
.quantity,
.description {
width: 100%;
text-align: center;
margin: 6px 0;
}
.buttons {
margin-right: 20px;
}
}
Note:
Save the above code with style.css .
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Ecommerce" transform="translate(-180.000000, -5886.000000)"
fill="#BDC7CF">
<g id="Cart-#1-Copy" transform="translate(150.000000, 5772.000000)">
<g id="#1" transform="translate(30.000000, 81.000000)">
<pathd="M12.3880257,33.3338025L7.45682327,38.2650049,
C7.25459731,38.46671236.92792459,38.4667123,6.72621715,38.2650049
L1.61249282,33.1512806C1.41078538,32.9495731,1.08359414,32.94957310.881886702,
33.1512806L0.151280579,33.8818867C-0.0504268598,34.0835941-
0.0504268598,34.41026690.151280579,34.6124928L5.26500491,39.7262172
C5.46671235,39.92792465.46671235,40.25459735.26500491,40.4568233
L0.333802478,45.3875072C0.132095039,45.58921460.132095039,45.9164059
0.333802478,46.1181133L1.0644086,46.8487194C1.26611604,47.0504269
1.59330728,47.05042691.79501472,46.8487194L6.72621715,41.917517
C6.92792459,41.71580967.25459731,41.71580967.45682327,41.917517
L12.2049853,46.6661975C12.4066927,46.86790512.733884,46.867905
12.9355914,46.6661975L13.6661975,45.9355914C13.867905,45.733884
13.867905,45.406692713.6661975,45.2049853L8.91751699,40.4568233
C8.71580955,40.25459738.71580955,39.92792468.91751699,39.7262172
L13.8487194,34.7950147C14.0504269,34.593307314.0504269,34.266116
13.8487194,34.0644086L13.1181133,33.3338025C12.9164059,33.132095
12.5897331,33.132095 12.3880257,33.3338025" id="Icon">
</path>
</g>
</g>
</g>
</g>
</svg>
Note:Save the above code with delete-icn.svg.
<title>Icon</title>
<defs></defs>
<g id="Ecommerce" transform="translate(-722.000000, -5892.000000)" fill="#86939E">
<g id="QTY" transform="translate(459.000000, 25.000000)">
<rect id="Icon" x="83" y="14" width="10" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Note:
Save the above code with minus.svg.
<title>Icon</title>
<defs></defs>
<g id="Ecommerce" transform="translate(-649.000000, -5888.000000)" fill="#86939E">
<g id="QTY" transform="translate(459.000000, 25.000000)">
<path d="M14,14 L10,14 L10,16 L14,16 L14,20 L16,20 L16,16 L20,16 L20,14 L16,14
L16,10 L14,10 L14,14 Z" id="Icon"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Note:
Save the above code withplus.svg.
Output:
Result:
Hence , the Shopping Cart Application by using Dynamic HTML with JavaScript have
been designed and developed successfully.
10.Hostel Application Form using JQuery
Task: Validate all Fields and Submit the Hostel Application Form designed in Module-6
using Jquery.
Aim:To Validate all Fields and Submit the Hostel Application Form designed in Module-6
using Jquery.
Description:
JQuery form Validation
The jQuery provide several plugins for validating a diffrent types of form data on client
side. In this form validation , we have simple and basic form validation using jQuery
validator() method.
Keep jQuery cdn in form
we need to put the jQuery library cdn plugin in form. In otherwords, To use jQuery
Validation Plugin we need to include cdn library of jQuery validation plugin.
<scriptsrc="https://code.jquery.com/jquery-
3.1.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/a
jax/libs/jqueryvalidate/1.19.0/jquery.validate.js"></script>
validation rules
Next, we need to write some validation rules in script tag. Below we have written this
basic rules for validating a form data before send to the server. The validate() method is
used to validate a form based on the selector provided.
Program:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hostel Registration form </title>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
:root{
--success-color:#2ecc71;
--error-color: #e74c3c;
}
*{
box-sizing: border-box;
}
body{
background-color: #f9fafb;
font-family:'OpenSans',sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0, 0.3);
width: 400px;
}
h2{
text-align: center;
margin: 0 0 20px;
}
.form{
padding: 30px 40px;
}
.form-control{
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label{
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input{
border: 2px solid #f0f0f0;
border-radius: 4px;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus{
outline: 0;
border-color: #777;
}
.form-control.success input
{
border-color:var(--success-color);
}
.form-control.error input{
border-color:var(--error-color);
}
.form-control small{
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small{
visibility: visible;
}
.form button{
cursor: pointer;
background-color: #3498db;
border: 2px sold #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 10px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form id="form" class="form" autocomplete="off">
<h2>Hostel Register Form</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username">
<small>Error message</small>
</div>
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
</div>
<label for="password2">Confirm Passsword</label>
<input type="password" id="password2" placeholder="Enter password again">
</div>
<button type="submit">Submit</button>
</form>
</div>
<script>
const form=document.getElementById('form');
const username=document.getElementById('username');
const email=document.getElementById('email');
const password=document.getElementById('password');
const password2=document.getElementById('password2');
//Show input error message
function showError(input,message){
constformControl=input.parentElement;
formControl.className='form-control error';
const small=formControl.querySelector('small');
small.innerText=message;
}
function showSuccess(input){
constformControl=input.parentElement;
formControl.className='form-control success';
}
//Email
function isValidEmail(email)
{
const re= /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',function(e){
e.preventDefault();
if(username.value===''){
showError(username,'Username is required');
}
else{
showSuccess(username);
}
if(email.value===''){
showError(email,'Email is required');
}else if(!isValidEmail(email.value)){
showError(email,'Email is not valid');
}
else{
showSuccess(email);
}
if(password.value===''){
showError(password,'Password is required');
}
else{
showSuccess(password);
}
if(password2.value===''){
showError(password2,'confirm password is required');
}
else{
showSuccess(password2);
}
});
</script>
</body>
</html>
Output:
Result:
Hence , all the fields in Hostel Application Form designed in Module-6 have
been validated and submitted successfully by using Jquery.
Google Charts
Task: Develop an HTML document to illustrate each chart with real-time examples.
Aim:To Develop an HTML document to illustrate each chart with real-time examples.
Description:
Program for Pie Chart:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Output:
Program for Bar Chart:
<html>
<head>
google.charts.load('current', {'packages':['bar']});
['Year', 'Sales', 'Expenses', 'Profit'],
['2017', 1000, 400, 200],
['2018', 1170, 460, 250],
['2019', 660, 1120, 300],
['2020', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017-2020',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Program for Area Chart:
<html>
<head>
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Program for Histogram:
<html>
<head>
google.charts.load("current", {packages:["corechart"]});
['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
[2/3, -1, 0, 0],
[2/3, -1, 0, null],
[2/3, -1, 0, null],
[-1/3, 0, 1, null],
[-1/3, 0, -1, null],
[-1/3, 0, null, null],
[-1/3, 0, null, null]
]);
var options = {
title: 'Charges of subatomic particles',
legend: { position: 'top', maxLines: 2 },
colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
interpolateNulls: false,
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Program for Line Charts:
<html>
<head>
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
Output:
Program for Gantt Chart:
<html>
<head>
google.charts.load('current', {'packages':['gantt']});
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources', null,
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper', 'write',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography', 'write',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper', 'complete',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper', 'write',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Output:
Result:
E-learning website using any CMS
Task: Develop an E-learning website using any CMS(for example WordPress)
Aim: To Develop an E-learning website using any CMS.
Description:
Program:

WAD MNUL 6 To 11

Uploaded by

Copyright:

Available Formats

You might also like

WAD MNUL 6 To 11

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WAD MNUL 6 To 11

Uploaded by

Copyright:

Available Formats

6.

Hostel Application Form

<table align="center" bgcolor="pink" height="500" width="500">

<title>MDMA - Multithreaded Daemon for Multimedia

[Connection closed by foreign host]

.00000 unc.32840 > ncsa.80: S 2785173504:2785173504(0) win

Stage 2: Time = 0.077

.07769 ncsa.80 > unc.32840: S 530752000:530752000(0) ack

Stage 3: Time = 0.35

Stage 4: Time = 0.45

Stage 5: Time = 0.53

Stage 6: Time = 0.60

.59904 ncsa.80 > unc.32840: . ack 1148 win 8189

Data transfer: Segments

Data transfer: Windows and Slow Start

Latency and Bandwidth

Effects of opening new connection per transaction

Effects Of Requesting A Single Object Per Transaction

<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">

<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">

<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">

<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer

Result: Hence, a Simple Calculator by using JavaScript has been designed

<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">

if (value < 100) {

/* Buttons - Delete and Like */

Keep jQuery cdn in form

You might also like