ANNAMACHARYA INSTITUTE OF TECHNOLOGY &

SCIENCES
Utukur(P), [Link](V & M),Kadapa Dist.,AP

Page | 1
WEB APPLICATION
DEVELOPMENT
LAB
MANUAL

Page | 2
 List of Experiments

[Link] Experiment Name Page no

1. Basic HTML Document 06-08

2. Profile Page 09-11

3. Class Time Table 12-14

4. Student Hostel Application Form 15-18

5. Student Hostel Application Form Using CSS 19-22

6. Hostel Application Form By Using Bootstrap CSS 23-27

7. Analyse various HTTP requests & Identifing problems 28-34

8. Simple Calculator Using JavaScript 35-38

9. Shopping Cart Application 39-52

10 Hostel Application Form using JQuery 53-59

11. HTML Document To Illustrate Each CHART 60-67

12. E-learning website using any CMS 68-91

Page | 3
 Course Code Web Application Development L T P C
20A05304 (Common to CSE, CSE (AI), CSE (AI & 1 0 2 2
ML) and
AI& DS)
Pre-requisite Semester III

Course Objectives:
• Learn website development using HTML, CSS, JavaScript.
• Understand the concepts of responsive web development using the bootstrap framework
• Make use of the JQueryjavascript library to provide interactiveness to the websites.
• Discover how to use Google Charts to provide a better way to visualize data on a website
• 5. Learn Content Management Systems to speed the development process
Course Outcomes (CO):
After completion of the course, students will be able to
• Construct web sites with valid HTML, CSS, JavaScript
• Create responsive Web designs that work on phones, tablets, or traditional laptops and widescreen
monitors.
• Develop websites using jQuery to provide interactivity and engaging user experiences
• Embed Google chart tools in a website for better visualization of data.
• Design and develop web applications using Content Management Systems like WordPress
Activities:
Module - 1:
HTML: What is a browser?, What is HTML?, Elements and Tags, Basic HTML5 structure, Metadata, <title>,
Adding favicon, Comments, headings
Task: Create a Basic HTML document

Module - 2:
HTML (continued): Block-Level Elements & Inline Elements, Links (Understand Absolute vs Relative paths),
Lists, Images, iframe (embed youtube video)
Task: Create your Profile Page

Module - 3:
HTML (continued): Tables: <table>, <tr>, <th>, <td>, Attributes for each Table element
Task: Create a Class Timetable (to merge rows/columns, use rowspan/colspan)

Module - 4:
HTML (continued): Form Elements: <input>, <select>, <textarea>, <button>, Attributes for each
Form element
Task: Create a Student Hostel Application Form

Module - 5:
Cascading Style Sheets (CSS): CSS Properties, Types of CSS, Selectors, box model, Pseudo-elements, z-index
Task: Make the Hostel Application Form designed in Module -4 beautiful using CSS (add colors, backgrounds,
change font properties, borders, etc.)

Module - 6:
Bootstrap - CSS Framework: Layouts (Containers, Grid system), Forms, Other Components
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)

Module - 7:
HTTP & Browser Developer Tools: Understand HTTP Headers (Request & Response Headers), URL & its
Anatomy, Developer Tools: Elements/Inspector, Console, Network, Sources, performance, Application Storage.
Task:Analyse various HTTP requests (initiators, timing diagrams, responses) and identify problems if any.

Page | 4
Module - 8:
Javascript: Variables, Data Types, Operators, Statements, Objects, Functions, Events & Event Listeners, DOM.
Task: Design a simple calculator using JavaScript to perform sum, product, difference, and quotient operations.

Module - 9:
Dynamic HTML with JavaScript: Manipulate DOM, Error Handling, Promises, async/await, Modules.
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.

Module - 10:
JQuery - A Javascript Library: Interactions, Widgets, Effects, Utilities, Ajax using JQuery.
Task: Validate all Fields and Submit the Hostel Application Form designed in Module-6 using JQuery

Module - 11:
Google Charts: Understand the Usage of Pie chart, Bar Chart, Histogram, Area & Line Charts, Gantt Charts.
Task: Develop an HTML document to illustrate each chart with real-time examples.

Module - 12:
Open Source CMS (Content Management System): What is a CMS?, Install CMS, Themes, Plugins.
Task: Develop an E-learning website using any CMS(for example WordPress)
References:
1. Deitel and Deitel and Nieto, ―Internet and World Wide Web - How to Program‖, Prentice Hall, 5th Edition,
2011.
2. Web Technologies, Uttam K. Roy, Oxford Higher Education., 1st edition, 10th impression, 2015. 3. Stephen
Wynkoop and John Burke ―Running a Perfect Website‖, QUE, 2nd Edition,1999.
4. Jeffrey C and Jackson, ―Web Technologies A Computer Science PerspectivePearsonEducation, 2011.
5. Gopalan N.P. and Akilandeswari J., ―Web Technology, Prentice Hall of India, 2011.
Online Learning Resources/Virtual Labs:
a. HTML: [Link]
b. HTML: [Link]
c. CSS: [Link]
d. Bootstrap - CSS Framework: [Link]
[Link]:[Link]
r_developer_tools
f. Javascript: [Link]
g. JQuery: [Link]
h. Google Charts: [Link]
i. Wordpress: [Link]

Page | 5
 1. BASIC HTML DOCUMENT
Task: Create a Basic HTML document .
Aim : To Create a Basic HTML document.
Description:
HTML stands for Hyper Text markup language. HTML was developed by “Tim Berner’s Lee”
In 1989. It is used to create Web pages.
The primary scripting language for developing web pages is Hyper Text markup
language(HTML).HTML allows us to write formatting instructions for web pages.
HTML documents are written using HTML “Tags” embedded in angular brackets. The set of tags
that we can use to write HTML documents is defined by the World Wide Web
consortium[W3C].W3C published many standards for HTML.
HTML ELEMENTS: HTML Elements are the fundamental building blocks of a web page. The
root element of an HTML document is<HTML>.Which contain all other elements.
BASIC STRUCTURE :
Every HTML Document starts with the <html> tag. This tell browsers that it is the beginning of an
html document. An HTML page has an basically two distinct logical sections :head section
specified by<head> and </head> tags and body sections specified by <body> and</body> tag
<html>
<head> head section</head>
<body> body of the program </body>
</html>
HTML COMMENTS: An HTML is not really a tag. Its starts with<…….. and ends with……..>
general syntax : <!........comment text……………>
ADDING A TITTLE: The <title> and </title> tags represented page titles. Their content is
displayed on the top of the browser window<title> my home page</title>
HTML BACKGROUND: The background of an HTML page is specified in the <body> tag. use
plain color or an image or background <body bgcolor =”brown”
BOLD TEXT: The tag<b> makes the enclosed text bold
HTML=<b>h</b>yper<b>t</b>ext=HYPER TEXT
UNDERLINED TEXT: Similarly <u> tag makes the enclosed text underlined
HTML=<u>h</u>yper<u>t</u>ext = HYPER TEXT

Page | 6
Program:

<!---DocTYPE html--->
<!--- The Basic HTML Doument--->
<html>
<head>
<title>Basic HTML Document</title>
<link rel="shortcut icon" href="[Link]" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="description" content="HTML Document">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor="White">
<h1>Welcome to my webpage</h1>
<!---h1 to h6 are the headings--->
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<!---paragraph---->
<p><b>Welcome to</b><i>my</i><u>brand</u><mark>new
website.</mark></p>
<p>This site will be my <strong>new</strong> home on the web.</p>
<a href="[Link]
</body>
</html>

Page | 7
Output:

Result:
Hence, a basic HTML document has been created successfully.

Page | 8
 2. Profile Page
Task: Create your Profile Page

Aim: To Create a Profile Page

Description:
The HTML <div> tag is used to group the large sections of HTML elements
together Every tag has a special purpose eg.<p> tag is used to specify the paragraph
.<h1> to <h6> tags are used to specify headings but the <div> tag is just like a container
unit which is used to encapsulation other page elements and divides the HTML
documents into sections.

The <div> tag is a block level element HTML div elements is used to wrap
the large sections of elements together. Class is an attribute which specifies one or more
class names for an HTML element. The <img>tag is used to embed an image in an
HTML page. src specifies the path. alt
.specifies an alternate text for the image.

<tr> it defines a row in a table

<th> it defines a header cell in a table

<td> it defines a cell in a table

<table> it defines a table

Page | 9
Program:
<!-----Student Profile------>
<div class="student-profile py-4">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card shadow-sm">
<div class="card-header bg-transparent text-center">
<img class="profile_img" src=""[Link] alt=""
height="250" width="250">
<h3>Alexander</h3>
</div>
<div class="card-body">
<p class="mb-0"><strong class="pr-1">Student ID:</strong>22000124</p>
<p class="mb-0"><strong class="pr-1">Branch:</strong>CSE</p>
<p class="mb-0"><strong class="pr-1">Section:</strong>A</p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card shadow-sm">
<div class="card-header bg-transparent border-0">
<h3 class="mb-0"><i class="far fa-clone pr-1"></i>General Information</h3>
</div>
<div class="card-body pt-0">
<table class="table table-bordered">
<tr>
<th width="30%">Roll</th>
<td width="2%">:</td>
<td>564</td>
</tr>
<tr>
<th width="30%">Academic Year </th>
<td width="2%">:</td>
<td>2021</td>
</tr>
<tr>
<th width="30%">Gender</th>
<td width="2%">:</td>
<td>Male</td>
Page | 10
</tr>
<tr>
<th width="30%">Religion</th>
<td width="2%">:</td>
<td>Group</td>
</tr>
<tr>
<th width="30%">blood</th>
<td width="2%">:</td>
<td>A+</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Output:

Alexander
Student ID:22000124
Branch:CSE
Section:A
General Information
Roll : 564
Academic Year : 2021
Gender : Male
Religion : Group
blood : A+
Result:
Hence, a profile page by using HTML has been created successfully.
Page | 11
 3. Class TimeTable
Task: Create a Class Timetable (to merge rows/columns, use rowspan/colspan)
Aim: To Create a Class Timetable.

Description:
A Table is an arrangement of rows and columns anyone can create a table by
knowing the basics of HTML. A Table is defined by using <table> tag in HTML.

Steps to create a table

Create a <HTML>tag

Create a table using the tags<table>

Create a rows in the table using <tr> this is the row

tag</tr> Insert the data into rows using <td> table

data</td> tags Close the table tag<table>

Close the HTML tag</html>

This is the basic time table created in HTML without the usage of font color and
background color
Program:
<!DOCTYPE html>
<html>
<head>
<title>TIME TABLE</title>
</head>
<body>
<h4 align="center">ANNAMACHARYA INSTITUTE OF TECHNOLOGYAND
SCIENCE,KADAPA,[Link],Y.S.R(D)</h4>
<h5 align="center"><U>II [Link] I-SEMISTER TIME TABLE FOR CSE-A</U><h5>
<table bgcolor="white" width="700" height="250"align="center" border style="dashed">
<thead height="50">
<tr>
<th>DAYS & HOURS</th>
<th>9:10am to 10:00am</th>
<th>10:00am to 10:50am</th>
<th>10:50am to 11:40am</th>
<th>11:40am to 12:30pm</th>
<th>12:30pm to 1:20pm</th>
Page | 12
<th>1:20pm to 2:10pm</th>
<th>2:10pm to 3:00pm</th>
<th>3:00pm to 3:50pm</th>
</tr>
</thead>
<tr
align="center"><td>MON</td><td>DMGT</td><td>DEMP</td><td>ADSA</td><td>JAVA</t
d>
<td rowspan=6 >LUNCH BREAK</td>
<td colspan="3">DEMP LAB</td>
</tr>
<tr align="center"><td>TUE</td><td>DEMP</td><td colspan="3">JAVA
LAB</td><td>CO</td><td>JAVA</td><td>DEMP</td></td>
<tr
align="center"><td>WED</td><td>ADSA</td><td>DMGT</td><td>JAVA</td><td>CO</td>
<td colspan="3">ADSA LAB</td></tr>
<tr
align="center"><td>THU</td><td>JAVA</td><td>DEMP</td><td>ADSA</td><td>DMGT</t
d><td >ADSA</td><td>CO</td><td>SPORTS</td></tr>
<tr
align="center"><td>FRI</td><td>CO</td><td>DMGT</td><td>WAD</td><td>ADSA</td><td
colspan="3">WAD LAB</td></tr>
<tr
align="center"><td>SAT</td><td>WAD</td><td>CO</td><td>DMGT</td><td>LIB</td><td>
DEMP</td><td>ES</td><td>JAVA</td></tr>
</table>
</body>
</head>
Output:

Page | 13
Result:
Hence, Class Timetable by using HTML has been created successfully.

Page | 14
 4. Student Hostel Application Form
Task: Create a Student Hostel Application Form.

Aim: To Create a Student Hostel Application Form by using HTML.

Description:
The HTML <form>tag is used to create a form on a web page that has interactive controls
for usr [Link] consists text fields, checkboxes, password fields, radio buttons, submit
button etc.

List of HTML 5 form tags

<form> It defines on HTML form o enter inputs by the user side.

<input> It defines on input control.

<input type=”text”> Displays a single line text.

<input type=”radio”> Displays a radio button for selecting one of many choice.

<input type=”checkbox”> Displays a checkbox.

<input type=”submit”> Displays a checkbox

<input type=”button”> Displays a clickable button

<text area> It defines a multi-line input control.

<select> It defines a drop drown list.

<option> It defines an option in a drop down list.

Page | 15
Program:
<!DOCTYPE html>
<html>
<head>
<title>Application Form</title>
</head>
<body>
<h1 style=text-align:left>Student Hostel Application Form</h1>
<form>
<table>
<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>

Page | 16
<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>Education Qualification:</td>
<td>
<select>
<option>Select Option</option>
<option>10+2</option>
<option>Graduation</option>
<option>Postgraduation</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea rows="5" col="17" placeholder="Address"></textarea>
</td>
</tr>
<tr >
<td>

Page | 17
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="submit" value="Print">
</td>
</tr>
</table>
</form>
</body>
</html>

Output:

Result:
Hence, Student Hostel Application Form by using HTML has been created
successfully.

Page | 18
 5. Hostel Application Form using CSS
Task: Make the Hostel Application Form designed in Module -4 beautiful using CSS (add
colors, backgrounds, change font properties, borders, etc.)
Aim: To make the Hostel Application Form designed in Module -4 beautiful using CSS.

Description:
CSS - Cascading Style Sheets.
Css describes how HTML elements are to be displayed on screen, paper or in others
media.
Css saves a lot of work. It can control the layout of multiple web pages all at once.
External style sheets are stored in css files.
Cascading style sheets(css)is used to format the layout of a webpage.
With css, you can control the color, font, the size to text, the spacing between elements are
positioned and layout, what background image or background color are to be used
different displays for different devices and screen sizes, and much more.
Css can be added to HTML documents in 3ways.
Inline-by using the style attribute inside the HTML elements.
Internal-by using the<style>element in the <head>
External-by using a<link>element to link to an external css files.
The most common way to add css is to keep the style in external css files.

Page | 19
Program:
<HTML>
<HEAD>
<TITLE>HOSTEL APPLICATION FORM</TITLE><style> body{
background-image:url("\[Link]");
background-position:center;
}
table{
background-color: rgb(175,254,154): font-family: monotype corsiva; border:3px
dashed; border-color:10px green; width:500;
} hl{
font-family: monotype corsiva;
font-style:italic;
}
td, th{
font-family: monotype corsiva;
font-style:normal; font-size: 20px;
}
</style>
</HEAD><BODY ALIGN="CENTER">
<H1>STUDENT HOSTEL APPLICATION FORM<H1>
<FORM>
<TABLE ALIGN="CENTER" BGCOLOR="99FFFF" HEIGHT="500">
<TR>
<TD>NAME OF THE STUDENT:</TD>
<TD>
<INPUT TYPE="text" PLACEHOLDER="student name" name=""
</td><tr>
<td>FATHER'S NAME:</td><td>
<input type="text" placeholder "father's name" name=""></td>
</tr>
<td>PHONE NUMBER:</td>
<td>
<input type="number" placeholder="1234564621"></td>
</tr>
<tr>
<td>EMAIL ID:</TD>
<TD>

Page | 20
<INPUT TYPE="EMAIL" placeholder="example8@gmail">
</td>
</tr>
<td>PASSWORD:</td>
<td>
<input type="password" placeholder "1234***
</td></tr>
<tr>
<td>DATE OF BIRTH:</TD>
<TD>
<input type="date">
</td>
</tr>
<td>GENDER:</TD>
<TD>
<INPUT TYPE="RADIO" NAME="GENDER">MALE <INPUT TYPE="RADIO"
NAME="GENDER">FEMALE
</TD></tr>
<tr>
<td>EDUCATION:</TD>
<TD>
<SELECT>
<OPTION SELECT OPTION</OPTION>
<OPTION 10+2</OPTION>
<OPTION GRADUATION</OPTION>
<OPTION>POST GRADUATION</OPTION>
</SELECT>
</TD>
<TR>
<TR>
<TD>HOBBIES:</TD>
<TD>
<INPUT TYPE="CHECKBOX">SINGING
<INPUT TYPE="CHECKBOX" DANCING
<INPUT TYPE="CHECKBOX">PLAYING
</TD>
<TR>
<TR>
<TD>ADDRESS:</TD>
<TD>

Page | 21
<TEXTAREA ROWS="5" COL="20"
PLACEHOLDER="ADDRESS"></TEXTAREA>
</TD>
<TR>
<TR>
<TD><INPUT TYPE="BUTTON" ONSUBMIT="SUCESSFULLY SUBMITED"
VALUE="SUBMIT"><INPUT TYPE="BUTTON" VALUE="RESET">
<INPUT TYPE="BUTTON" VALUE="PRINT"></TD></TR>
</FORM>
</TABLE>
</BODY>
</HTML>
Output:

Result:
Hence , the Hostel Application Form designed in Module-4 has been created
beautifully & successfully by using CSS.

Page | 22
 6. Hostel Application Form By Using Bootstrap CSS
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 using
Bootstrap CSS.
Description:
Bootstrap is a free and open source CSS Framework directed at
responsive , mobile first front-end web development.
Bootstrap includes HTML and CSS based design templets for
typography,forms, buttons, tables, navigation, images, carousles and many
other, as well as optional JavaScript plugins.
Bootstrap also give you to the ability to easily create responsive designs.
Bootstrap 5 (released 2021) is the newest version to bootstrap. It supports
the latest stable released of all major browsers and platforms.
Keep Bootstrap cdn in form
<link href="[Link]
rel="stylesheet">
Purpose of Bootstrap :
• Decreasse of website
• Save time
• Excellent look
• Decrease code of line
• Maximumuse of code
• It is easy and not complex code.

Page | 23
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="[Link]
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;
}
[Link]{
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>
Page | 24
<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">
Page | 25
</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>Postgraduation</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea rows="5" col="17" placeholder="Address"></textarea>
</td>
</tr>
<tr >
Page | 26
<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.
Page | 27
 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 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
repairing 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 /[Link] HTTP/1.0
Accept: text/plain
Accept: text/html
Accept: */*
User-Agent: Yet Another User Agent

Page | 28
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 terminated 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 [Link] 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.
Page | 29
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)

Stage 3: Time = 0.35

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)

Stage 4: Time = 0.45

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
.45492 unc.32840 > ncsa.80: . ack 1025 win 9112 (DF)

Stage 5: Time = 0.53

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

Page | 30
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
.52755 unc.32840 > ncsa.80: . ack 1854 win 9112 (DF)
.52876 unc.32840 > ncsa.80: F 1147:1147(0) ack 1854 win 9112 (DF)

Stage 6: Time = 0.60

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

Page | 31
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 segment in transit. Every time a segment is acknowledged
without loss, the congestion window is opened; every time a segment 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.

Page | 32
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.

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 receiving 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
Page | 33
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.

Page | 34
 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:
For Creating a basic calculator in java script use table structure, input type button and
eval() java script function.
• Input type button use to take input from user.
• Table structure is use to create calculator structure.
• Eval () function to evaluate the function

To get started, you need to consider the basic functionalities of a calculator. They
include addition, subtraction, multiplication, division, delete, alt-clear and of course
the ability to use decimal numbers in performing these operations.
The various HTML and CSS element along with vanilla java script used in
building a responsive calculator.
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;

Page | 35
}

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

Page | 36
 <!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "[Link] += '1' ">
<input type = "button" value = "2" onclick = "[Link] += '2' ">
<input type = "button" value = "3" onclick = "[Link] += '3' ">
<input type = "button" value = "+" onclick = "[Link] += '+' ">
<br> <br>

<input type = "button" value = "4" onclick = "[Link] += '4' ">

<input type = "button" value = "5" onclick = "[Link] += '5' ">
<input type = "button" value = "6" onclick = "[Link] += '6' ">
<input type = "button" value = "-" onclick = "[Link] += '-' ">
<br> <br>

<input type = "button" value = "7" onclick = "[Link] += '7' ">

<input type = "button" value = "8" onclick = "[Link] += '8' ">
<input type = "button" value = "9" onclick = "[Link] += '9' ">
<input type = "button" value = "*" onclick = "[Link] += '*' ">
<br> <br>

<input type = "button" value = "/" onclick = "[Link] += '/' ">

<input type = "button" value = "0" onclick = "[Link] += '0' ">
<input type = "button" value = "." onclick = "[Link] += '.' ">

<input type = "button" value = "=" onclick = "[Link] = eval([Link]

.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "[Link] = ' ' " id= "c
lear" >
<br>
</form>
</div>
</body>
</html>
Output:

Page | 37
 Result: Hence, a Simple Calculator by using JavaScript have been designed
Sucessfully.

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.

Page | 38
• 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.

Page | 39
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="[Link]" media="screen" title="no title" charset="utf-8">

<script src="[Link] charset="utf-8"></script>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag
</div>

<!-- Product #1 -->

<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>

<div class="image">
<img src="[Link]" 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">
<img src="[Link]" alt="" />
</button>

Page | 40
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="[Link]" alt="" />
</button>
</div>

<div class="total-price">$549</div>
</div>

<!-- Product #2 -->

<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>

<div class="image">
<img src="[Link]" alt=""/>
</div>

<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>

<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="[Link]" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="[Link]" alt="" />
</button>
</div>

<div class="total-price">$870</div>
</div>

<!-- Product #3 -->

<div class="item">
Page | 41
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>

<div class="image">
<img src="[Link]" alt="" />
</div>

<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>

<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="[Link]" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="[Link]" alt="" />
</button>
</div>

<div class="total-price">$349</div>
</div>
</div>

<script type="text/javascript">
$('.minus-btn').on('click', function(e) {
[Link]();
var $this = $(this);
var $input = $[Link]('div').find('input');
var value = parseInt($[Link]());

if (value > 1) {
value = value - 1;
} else {
value = 0;
}
Page | 42
 $[Link](value);

});

$('.plus-btn').on('click', function(e) {
[Link]();
var $this = $(this);
var $input = $[Link]('div').find('input');
var value = parseInt($[Link]());

if (value < 100) {

value = value + 1;
} else {
value =100;
}
$[Link](value);
});

$('.like-btn').on('click', function() {
$(this).toggleClass('is-active');
});
</script>
</body>
</html>

Note:
Save the above program with “.html extension”.

Page | 43
CSS code:
@import url([Link]

*{
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;
Page | 44
 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("[Link]") no-repeat center;
margin-right: 20px;
}

.like-btn {
position: absolute;
top: 9px;
left: 15px;
display: inline-block;
background: url('[Link]');
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;
Page | 45
 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;
Page | 46
 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-btn img {
margin-bottom: 3px;
}
.plus-btn img {
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;
}

Page | 47
/* 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 “[Link] “.

Page | 48
Delete icon
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
xmlns="[Link] xmlns:xlink="[Link]
<!-- Generator: Sketch 3.8.3 (29802) - [Link] -->
<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 “[Link]”.

Page | 49
Minus icon
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="2px" viewBox="0 0 10 2" version="1.1"
xmlns="[Link] xmlns:xlink="[Link]
<!-- Generator: Sketch 3.8.3 (29802) - [Link] -->
<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(-722.000000, -5892.000000)" fill="#86939E">
<g id="Cart-#1-Copy" transform="translate(150.000000, 5772.000000)">
<g id="#1" transform="translate(30.000000, 81.000000)">
<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 “[Link]”.

Page | 50
Plus icon
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1"
xmlns="[Link] xmlns:xlink="[Link]
<!-- Generator: Sketch 3.8.3 (29802) - [Link] -->
<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(-649.000000, -5888.000000)" fill="#86939E">
<g id="Cart-#1-Copy" transform="translate(150.000000, 5772.000000)">
<g id="#1" transform="translate(30.000000, 81.000000)">
<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 with “[Link]”.

Page | 51
Output:

Result:
Hence , the Shopping Cart Application by using Dynamic HTML with JavaScript have
been designed and developed successfully.

Page | 52
 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 different 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="[Link]
[Link]"></script><scriptsrc="[Link]
.19.0/[Link]"></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.

Page | 53
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('[Link]
:root{
--success-color:#2ecc71;
--error-color: #e74c3c;
}
*{
box-sizing: border-box;
}
body{
background-color: #f9fafb;
font-family:'Open Sans',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;
Page | 54
 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;
}
.[Link] input
{
border-color:var(--success-color);
}
.[Link] input{
border-color:var(--error-color);
}
.form-control small{
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.[Link] small{

visibility: visible;
}

.form button{
cursor: pointer;

Page | 55
 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 Registeration Form</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username">
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Passsword</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script>

Page | 56
const form=[Link]('form');
const username=[Link]('username');
const email=[Link]('email');
const password=[Link]('password');
const password2=[Link]('password2');
//Show input error message
function showError(input,message){
const formControl=[Link];
[Link]='form-control error';
const small=[Link]('small');
[Link]=message;
}
function showSuccess(input){
const formControl=[Link];
[Link]='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 [Link](String(email).toLowerCase());
}
[Link]('submit',function(e){
[Link]();

if([Link]===''){
showError(username,'Username is required');
}
else{
showSuccess(username);
}
if([Link]===''){
showError(email,'Email is required');
}else if(!isValidEmail([Link])){
showError(email,'Email is not valid');
}
else{
showSuccess(email);
}

Page | 57
 if([Link]===''){
showError(password,'Password is required');
}
else{
showSuccess(password);
}
if([Link]===''){
showError(password2,'confirm password is required');
}
else{
showSuccess(password2);
}
});
</script>
</body>
</html>

Page | 58
Output:

Result:
Hence , all the fields in Hostel Application Form designed in Module-6 have
been validated and submitted successfully by using Jquery.

Page | 59
 11. HTML Document To Illustrate Each CHART
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:
Google Charts is a pure JavaScript based charting library meant to enhance web
applications by adding interactive charting capability. Google Charts provides wide
variety of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox,
Safari, Internet Explorer(IE). For example, line charts, spline charts, area charts, bar
charts, pie charts and so on.
Using CDN
Include the Google Chart JavaScript file in the HTML page using following script −
<head>
<script src = "[Link]
</head>
Features
Following are the salient features of Google Charts library.
• Compatability − Works seemlessly on all major browsers and mobile platforms like
android and iOS.
• Multitouch Support − Supports multitouch on touch screen based platforms like
android and iOS. Ideal for iPhone/iPad and android based smart phones/ tablets.
• Free to Use − Open source and is free to use for non-commercial purpose.
• Lightweight − [Link] core library, is extremely lightweight library.
• Simple Configurations − Uses json to define various configuration of the charts and
very easy to learn and use.
• Dynamic − Allows to modify chart even after chart generation.
• Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.
• Configurable tooltips − Tooltip comes when a user hover over any point on a charts.
googlecharts provides tooltip inbuilt formatter or callback formatter to control the
tooltip programmatically.
• DateTime support − Handle date time specially. Provides numerous inbuilt controls
over date wise categories.
• Print − Print chart using web page.
• External data − Supports loading data dynamically from server. Provides control
over data using callback functions.
• Text Rotation − Supports rotation of labels in any direction.

Page | 60
Program for Pie Chart:
<html>
<head>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]('current', {'packages':['corechart']});
[Link](drawChart);
function drawChart() {
var data = [Link]([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new [Link]([Link]('piechart'));
[Link](data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Output:

Page | 61
Program for Bar Chart:
<html>
<head>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]('current', {'packages':['bar']});
[Link](drawChart);
function drawChart() {
var data = [Link]([
['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 [Link]([Link]('barchart_material'));
[Link](data, [Link](options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

Page | 62
Program for Area Chart:
<html>
<head>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]('current', {'packages':['corechart']});
[Link](drawChart);
function drawChart() {
var data = [Link]([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new [Link]([Link]('chart_div'));
[Link](data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

Page | 63
Program for Histogram:
<html>
<head>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]("current", {packages:["corechart"]});
[Link](drawChart);
function drawChart() {
var data = [Link]([
['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 [Link]([Link]('chart_div'));
[Link](data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

Page | 64
Program for Line Charts:
<html>
<head>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]('current', {'packages':['corechart']});
[Link](drawChart);
function drawChart() {
var data = [Link]([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new [Link]([Link]('curve_chart'));
[Link](data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
Output:

Page | 65
Program for Gantt Chart:
<html>
<head>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]('current', {'packages':['gantt']});
[Link](drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new [Link]();
[Link]('string', 'Task ID');
[Link]('string', 'Task Name');
[Link]('string', 'Resource');
[Link]('date', 'Start Date');
[Link]('date', 'End Date');
[Link]('number', 'Duration');
[Link]('number', 'Percent Complete');
[Link]('string', 'Dependencies');
[Link]([
['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 = {
Page | 66
 height: 275
};
var chart = new [Link]([Link]('chart_div'));
[Link](data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

Output:

Result:
Hence , HTML document to illustrate each chart with real-time examples have
been developed successfully.

Page | 67
 12. E-learning website using any CMS
Task: Develop an E-learning website using any CMS(for example Word Press)
Aim: To Develop an E-learning website using any CMS.
Description:

• CMS stands for Content Managemant System.

• CMS is computer software (or) an application that uses a database to manage all
content, and it can be used when developing a website.
• A CMS can there for be used to update content and/or your website structure.
• CMS is used for allowing multiple contributors to create, edit publish.
• Content in a CMS is typically stored in a database and displayed in a presentation
layer based on a set of templates like a website.
• CMS enables ecommerce shop owners to create, edit and publish digital website
content.

Page | 68
Program:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive Online Study Website Design Tutorial</title>
<!-- google fonts cdn link -->
<link rel="preconnect" href="[Link]
<link
href="[Link]
rel="stylesheet">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="[Link]
awesome/5.15.2/css/[Link]">
<!-- custom css file link -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- header section starts -->
<header>
<div id="menu" class="fas fa-bars"></div>
<a href="#" class="logo"><i class="fas fa-user-graduate"></i>LOGO</a>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#course">course</a></li>
<li><a href="#teacher">teacher</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
<div id="login" class="fas fa-user-circle"></div>
</header>
<!-- header section ends -->
<!-- login form -->
<div class="login-form">
<form action="">
<h3>login</h3>
<input type="email" placeholder="username" class="box">
<input type="password" placeholder="password" class="box">
<p>forget password? <a href="#">click here</a></p>
Page | 69
<p>don't have an account? <a href="#">register now</a></p>
<input type="submit" class="btn" value="login">
<i class="fas fa-times"></i>
</form>
</div>
<!-- home section starts -->
<section class="home" id="home">
<h1>education from home</h1>
<p>E-learning is a structured course or learning experience delivered electronically; it can also
include performance support content. ... It helps organizations manage training events, self-paced
courses, and blended learning programs.</p>
<a href="#"><button class="btn">get started</button></a>
<div class="shape"></div>
</section>
<!-- home section ends -->
<!-- about section starts -->
<section class="about" id="about">
<div class="image">
<img src="images/[Link]" alt="">
</div>
<div class="content">
<h3>why choose us?</h3>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<a href="#"><button class="btn">learn more</button></a>
</div>
</section>
<!-- about section ends -->
<!-- course section starts -->
<section class="course" id="course">
<h1 class="heading">our popular courses</h1>
<div class="box-container">
<div class="box">
<img src="images/[Link]" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>

Page | 70
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>
<div class="box">
<img src="images/[Link]" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>
<div class="box">
<img src="images/[Link]" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>

Page | 71
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>
<div class="box">
<img src="images/[Link]" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>
<div class="box">
<img src="images/[Link]" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>

Page | 72
</div>
</div>
<div class="box">
<img src="images/[Link]" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>
</div>
</section>
<!-- course section ends -->
<!-- teacher section starts -->
<section class="teacher" id="teacher">
<h1 class="heading">our expert teachers</h1>
<p>“E-Learning doesn't just "happen"! It requires careful planning and implementation.”</p>
<a href="#"><button class="btn">learn more</button></a>
</section>
<!-- teacher section ends -->
<!-- contact section starts -->
<section class="contact" id="contact">
<h1 class="heading">contact us</h1>
<div class="row">
<form action="">
<input type="text" placeholder="full name" class="box">
<input type="email" placeholder="your email" class="box">
<input type="password" placeholder="your password" class="box">
<input type="number" placeholder="your number" class="box">
<textarea name="" id="" cols="30" rows="10" class="box address" placeholder="your
address"></textarea>

Page | 73
<input type="submit" class="btn" value="send now">
</form>
<div class="image">
<img src="images/[Link]" alt="">
</div>
</div>
</section>
<!-- contact section ends -->
<!-- footer section starts -->
<div class="footer">
<div class="box-container">
<div class="box">
<h3>branch locations</h3>
<a href="#">India</a>
<a href="#">USA</a>
<a href="#">france</a>
<a href="#">russia</a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#">home</a>
<a href="#">about</a>
<a href="#">course</a>
<a href="#">teachers</a>
<a href="#">contact</a>
</div>
<div class="box">
<h3>contact info</h3>
<p> <i class="fas fa-map-marker-alt"></i> mumbai, india 400104. </p>
<p> <i class="fas fa-envelope"></i> example@[Link] </p>
<p> <i class="fas fa-phone"></i> +123-456-7890 </p>
</div>
</div>
<h1 class="credit">created by <a href="#">[Link] web designer</a> all rights reserved. </h1>
</div>
<!-- footer section ends -->
<!-- jquery cdn link -->
<script src="[Link]
<!-- custom js file link -->
<script src="[Link]"></script>
</body>
</html>
NOTE: Save the above code with “.html extension”.

Page | 74
CSS Code:
:root{
--gradient:linear-gradient(90deg, #f1c40f, #f39c12);
}
*{
font-family: 'Open Sans', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
border:none; outline: none;
text-decoration: none;
text-transform: capitalize;
transition: all .2s linear;
}
*::selection{
background:#f39c12;
color:#fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
html::-webkit-scrollbar{
width:1.5rem;
}

html::-webkit-scrollbar-track{
background:#333;
}
html::-webkit-scrollbar-thumb{
background:linear-gradient(#f1c40f, #f39c12);
}
section{
min-height: 100vh;
padding:1rem 7%;
padding-top:6rem;
}
.btn{
padding:.7rem 3rem;
font-size: 2rem;
color:#fff;
background:var(--gradient);
border-radius: 5rem;
margin-top: 1rem;

Page | 75
cursor: pointer;
box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
position: relative;
overflow: hidden;
z-index: 0;
}
.btn::before{
content: '';
position: absolute;
top:-1rem; left:-100%;
background:#fff9;
height:150%;
width:20%;
transform: rotate(25deg);
z-index: -1;
}
.btn:hover::before{
transition: .3s linear;
left: 120%;
}
.heading{
color:#444;
padding:1rem;
font-size: 4rem;
text-align: center;
}
header{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top:0; left: 0;
z-index: 1000;
padding:1.5rem 7%;
background:var(--gradient);
box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
}
header .logo{
color:#fff;
font-size: 2.5rem;
}
header .navbar ul{

Page | 76
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li{
margin:0 1rem;
}
header .navbar ul li a{
font-size: 2rem;
color:#fff;
}
header .navbar ul li [Link],
header .navbar ul li a:hover{
color:#444;
}
header #login{
font-size: 3rem;
color:#fff;
cursor: pointer;
}
header #login:hover{
color:#444;
}
header #menu{
font-size: 3rem;
color:#fff;
cursor: pointer;
display: none;
}
.login-form{
height:100%;
width:100%;
position: fixed;
top:-120%; left: 0;
z-index: 1000;
background:rgba(0,0,0,.5);
display: flex;
align-items: center;
justify-content: center;
}
.[Link]{
top:0;

Page | 77
}
.login-form form{
width:35rem;
background:#fff;
margin:0 2rem;
padding:1rem 3rem;
border-radius: .5rem;
box-shadow: 0 .1rem .3rem #333;
position: relative;
}
.login-form form h3{
font-size: 3rem;
color:#f39c12;
padding:1rem 0;
}
.login-form form .box{
width:100%;
padding:1rem 0;
margin:1rem 0;
border-bottom: .2rem solid #666;
font-size: 1.6rem;
color:#333;
text-transform: none;
}
.login-form form .box::placeholder{
text-transform: capitalize;
}
.login-form form .box:focus{
border-color: #f39c12;
}
.login-form form .box:nth-child(3){
margin-bottom: 5rem;
}
.login-form form p{
font-size: 1.4rem;
color:#666;
padding:.5rem 0;
}
.login-form form p a{
color:#f39c12;
}
.login-form form .btn{
width: 100%;

Page | 78
margin:2rem 0;
}
.login-form form .btn:hover{
background:#444;
}
.login-form form .fa-times{
position: absolute;
top:1.5rem; right:2rem;
font-size: 2.5rem;
cursor: pointer;
color:#999;
}
.login-form form .fa-times:hover{
color:#444;
}
.home{
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background:url(images/[Link]) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
text-align: center;
}
.home h1{
font-size: 6rem;
color:#666;
}
.home p{
font-size: 1.9rem;
color:#999;
padding:1rem 0;
width:70rem;
}
@keyframes animate{
0%{
background-position-x: 0rem;
}
100%{
background-position-x: 100rem;

Page | 79
}
}
.about{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.about .image{
flex:1 1 40rem;
}
.about .image img{
height:65vh;
width:100%;
}
.about .content{
flex:1 1 40rem;
}
.about .content h3{
font-size: 3.5rem;
color:#666;
}
.about .content p{
font-size: 1.5rem;
color:#666;
padding:1rem 0;
}
.course .box-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.course .box-container .box{
width:35rem;
border:.1rem solid rgba(0,0,0,.3);
position: relative;
margin:1.5rem;
}
.course .box-container .box img{
height:20rem;
width: 100%;
object-fit: cover;

Page | 80
}
.course .box-container .box .content{
padding:1rem;
}
.course .box-container .box .content .stars i{
color:#f39c12;
font-size: 1.7rem;
padding:1rem .1rem;
}
.course .box-container .box .content .title{
color:#444;
font-size: 2.1rem;
}
.course .box-container .box .content .title:hover{
text-decoration: underline;
}
.course .box-container .box .content p{
padding:1rem 0;
color:#666;
font-size: 1.5rem;
}
.course .box-container .box .content .info{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: .5rem;
border-top: .1rem solid rgba(0,0,0,.3);
}
.course .box-container .box .content .info h3{
font-size: 1.5rem;
padding:1rem;
color:#666;
}
.course .box-container .box .content .info h3 i{
color:#f39c12;
}
.course .box-container .box .price{
position: absolute;
top:16rem; right:1rem;
height:8rem;
width:8rem;
line-height: 8rem;
text-align: center;

Page | 81
border-radius: 50%;
background:var(--gradient);
color:#fff;
font-size: 3rem;
}
.teacher{
text-align: center;
background:url([Link]) no-repeat;
background-size: cover;
background-position: bottom;
}
.teacher p{
font-size: 1.8rem;
color:#666;
width:65rem;
margin:1rem auto;
}
.contact{
background:#111;
}
.contact .heading{
color:#fff;
}
.contact .row{
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.contact .row form{
flex:1 1 50rem;
background:#222;
padding:2rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 3rem;
align-items: flex-start;
}
.contact .row form .box{
height:5rem;
width:49%;
border:.1rem solid #eee;

Page | 82
padding:0 1rem;
margin:1rem 0;
font-size: 1.7rem;
color:#fff;
background:none;
text-transform: none;
}
.contact .row form .box:focus{
border-color: #f39c12;
}
.contact .row form .box::placeholder{
text-transform: capitalize;
}
.contact .row form .address{
height:15rem;
padding:1rem;
resize: none;
width:100%;
}
.contact .row form .btn:hover{
background:#fff;
color:#333;
}
.contact .row .image img{
height: 80vh;
margin-top: 2rem;
}
.footer{
background:#333;
}
.footer .box-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.footer .box-container .box{
margin:1.5rem;
text-align: center;
flex:1 1 25rem;
}
.footer .box-container .box h3{
font-size: 2.5rem;
color:#fff;

Page | 83
padding:1rem 0;
}
.footer .box-container .box p{
font-size: 1.7rem;
color:#eee;
padding:.7rem 0;
}
.footer .box-container .box p i{
padding-right: .5rem;
color:#f39c12;
}
.footer .box-container .box a{
font-size: 1.8rem;
display: block;
padding:.5rem 0;
color:#eee;
}
.footer .box-container .box a:hover{
text-decoration: underline;
}
.footer .credit{
padding:2rem 1rem;
font-size: 2rem;
color:#fff;
background:#111;
text-align: center;
font-weight: normal;
padding-bottom: 9rem;
}
.footer .credit a{
color:#f39c12
}
/* media queries */
@media (max-width:768px){
html{
font-size: 55%;
}
header #menu{
display: block;
}
header .navbar{
position: fixed;
top:-120%; left:0;

Page | 84
width:100%;
background:#444;
}
header .navbar ul{
flex-flow: column;
padding:2rem 0;
}
header .navbar ul li{
margin:1.5rem 0;
text-align: center;
width:100%;
}
header .navbar ul li a{
font-size: 2.5rem;
display: block;
}
header .navbar ul li [Link],
header .navbar ul li a:hover{
color:#f39c12;
}
.fa-times{
transform: rotate(180deg);
}
header .[Link]-toggle{
top:6.4rem;
}
.home h1{
font-size: 4rem;
}
.home p{
width: auto;
}
.teacher p{
width:auto;
}
.contact .row .image{
display: none;
}
}
@media (max-width:500px){
html{
font-size: 50%;
}

Page | 85
.contact .row form .box{
width:100%;
}
}

NOTE: Save the above CSS code with “[Link]”.

Page | 86
JavaScript Code:
$(document).ready(function(){
$('#menu').click(function(){
$(this).toggleClass('fa-times');
$('.navbar').toggleClass('nav-toggle');
});
$('#login').click(function(){
$('.login-form').addClass('popup');
});
$('.login-form form .fa-times').click(function(){
$('.login-form').removeClass('popup');
});
$(window).on('load scroll',function(){
$('#menu').removeClass('fa-times');
$('.navbar').removeClass('nav-toggle');
$('.login-form').removeClass('popup');
$('section').each(function(){
let top = $(window).scrollTop();
let height = $(this).height();
let id = $(this).attr('id');
let offset = $(this).offset().top - 200;
if(top > offset && top < offset + height){
$('.navbar ul li a').removeClass('active');
$('.navbar').find(`[href="#${id}"]`).addClass('active');
}
});
});
});

NOTE: Save the above JavaScript code with “[Link]”.

Page | 87
Output:

Page | 88
Page | 89
Page | 90
Result:
Hence, by using CMS(word press) an E-learning website have been
developed successfully.

Page | 91
THE END
****

Page | 92