0% found this document useful (0 votes)

20 views112 pages

Ilovepdf Merged

Uploaded by

khushi singh

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

20 views112 pages

Ilovepdf Merged

Uploaded by

khushi singh

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 112

BITE304P – Web Technologies

Laborartory

Lab Assignment -1
Lab slot - L9 + L10
Submitted on – 9 th February, 2024
HYPER TEXT MARKUP LANGUAGE (HTML)
1) Introduction to HTML
a. Create a webpage that prints your name to the screen.
b. Create a webpage that prints the numbers 1 - 10 to the screen.
c. Create a webpage and set its title to "This is a webpage".
d. Create a webpage that prints the message "When was this webpage created? Check page's
title for the answer." to the screen, and set the title of the page to the current date.
e. Create a webpage that prints any text of your choice to the screen; do not include a head
section in the code.
f. Create a webpage which keeps track of the browsers information and do the following
• refreshes its page in 5 seconds,
• expires in a duration of time
CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is a webpage</title>
</head>
<body>
<h1>Assessment - 1</h1>
<section>
<h2>1 - a</h2>
<h1>Khushi </h1>
</section>
<section>
<h2>1 - b</h2>
<ul style="list-style: none">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</section>
<section>
<h2>1 - c</h2>
<div>Title changed</div>
</section>
<section>
<h2>1 - d</h2>
</section>
<section>
<h2>1 - e</h2>
</section>
</body>
</html>

OUTPUT:

Part d

Code:

<!DOCTYPE html>
<html>
<head>
<title>09-01-2023</title>
</head>
<body>
<h2>1 - d</h2>
When was this webpage created?
<br>
Check the title for the answer...!!
</body>
</html>
OUTPUT:

Part e code:

<html>
<body>
<h2>1 - e</h2>
this is a webpage without header
</body>
</html>

OUTPUT:
Partf

Code:

<!DOCTYPE html>
<html>
<head>
<title>ques 1(f)</title>
<meta http-equiv="refresh" content="5">
<meta name="expires" content="Friday, 16-Aug-19 10:36:00 GMT">
</head>
<body>
<h2>1 - f</h2>
hello world!
</body>
</html>

Output:

2) HTMLTEXT EXERCISES

a. Print your name in green

b. Print the numbers 1 - 10, each number being a differentcolor.

c. Prints your name in a Tahoma font.

d. Display a part of a word with bold underline.

e. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font

f. Print a paragraph that is a description of a book; include the title of the book as well as its
author. Names and titles should be underlined, adjectives should be italicized and bolded.
g. Print your name to the screen with every letter being a different heading size.

h. Write a comment line on your code and make sure it is not displayed in the page

i. Print a 2+b2=2ab j. Print H2O k. Display a c code as it is in the page

l. Set the background color of the page as yellow m. Set an image as background of the page

n. Set the font size as 10. Print it. Again try to decrease the font size. Check whether the font size
is reduced.

o. Apply marquee for your name

p. Display a paragraph contents in a single line

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.q1 h1{
color: green;
}
.q2 li:nth-child(1){
color: green;
}
.q2 li:nth-child(2){
color: red;
}
.q2 li:nth-child(3){
color: yellow;
}
.q2 li:nth-child(4){
color: blue;
}
.q2 li:nth-child(5){
color: purple;
}
.q2 li:nth-child(6){
color: orange;
}
.q2 li:nth-child(7){
color: magenta;
}
.q2 li:nth-child(8){
color: mediumaquamarine;
}
.q2 li:nth-child(9){
color: gray;
}
.q2 li:nth-child(10){
color: black;
}
.q3 h1{
font-family: Tahoma;
}
.q4 i{
font-weight: bold;
text-decoration: underline;
}
.q5 .i1{
font-family: Agency FB;
}
.q5 .i2{
font-family: Arial Narrow;
}
.q5 .i3{
font-family: Bahnschrift;
}
.q5 .i4{
font-family: Arial Rounded MT Bold;
}
.q6 i{
font-style: italic;
text-decoration: underline;
}
.q7 div{
display: flex;
}
.q12{
height: 100vh;
background: yellow;
}
.q13{
background-image: url("../Ques-04/image/image4.jpg");
height: 100vh;
}
/*.q14 div{*/
/* font-size: 10px;*/
/*}*/
.q14 div{
font-size: 8px;
}
</style>
</head>
<body>
<section class="q1">
<h2>2 - a</h2>
<h1>Khushi</h1>
</section>
<section class="q2">
<h2>2 - b</h2>
<ul style="list-style: none">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</section>
<section class="q3">
<h2>2 - c</h2>
<h1>Khushi Singh</h1>
</section>
<section class="q4">
<h2>2 - d</h2>
<h1><i>Khushi</i>Singh</h1>
</section>
<section class="q5">
<h2>2 - e</h2>
<p>
<i class="i1">Lorem Ipsum is simply dummy text of the printing and
typesetting</i>
<i class="i2">industry. Lorem Ipsum has been the industry's standard dummy
text</i>
<i class="i3">ever since the 1500s, when an unknown printer took a galley of
type</i>
<i class="i4">and scrambled it to make a type specimen book. It has survived
not</i>
</p>
</section>
<section class="q6">
<h2>2 - f</h2>
<p>
<i>Thomas Sawyer</i> is the titular character of the <i>Mark Twain</i>
novel <i>The Adventures of Tom Sawyer (1876)</i>. He appears in three other
novels by Twain: Adventures of Huckleberry Finn (1884),<i> Tom Sawyer
Abroad (1894)</i>, and Tom Sawyer, Detective (1896).
</p>
</section>
<section class="q7">
<h2>2 - g</h2>
<div>
<h1>A</h1>
<h2>r</h2>
<h3>n</h3>
<h4>a</h4>
<h5>b</h5>
<h6>G</h6>
</div>
</section>
<section class="q8">
<h2>2 - h</h2>

</section>
<section class="q9">
<h2>2 - i</h2>
<p>
a <sup>2</sup> + b<sup>2</sup> = 2ab
</p>
</section>
<section class="q10">
<h2>2 - j</h2>
<p>
H<sub>2</sub>O
</p>
</section>
<section class="q11">
<h2>2 - k</h2>
<div>
<pre>
#include "stdio.h"
int main{
printf("Hello world");
return 0;
}
</pre>
</div>
</section>
<section class="q12">
<h2>2 - l</h2>
</section>
<section class="q13">
<h2>2 - m</h2>
</section>
<section class="q14">
<h2>2 - n</h2>
<div>
Khushi
</div>
</section>
<section class="q15">
<h2>2 - o</h2>
<marquee attribute_name = "attribute_value">
Khushi
</marquee>
</section>
<section class="q16">
<h2>2 - p</h2>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
</section>
</body>
</html>

OUTPUT:
3) HTML TEXT FORMATTING, LISTS EXERCISES
a. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to
it the number 2 superscripted, an equal sign and theresult.
b. Prints 10 names with a line break between each name. The list should be alphabetized, and
to do this place a subscripted number next to each name based on where it will go in the
alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript
number next to each name, then the alphabetized list. Both lists should have an
level heading.
c. Print two lists with any information you want. One list should be an ordered list, the other
list should be an unordered list
d. Print a list which starts with 7 with the type i
e. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the
horizontal line print a paragraph relating to the text in the heading.
f. Print a definition list with 5 items
g. Print two addresses in the same format used on the front of envelopes (senders address in
top left corner, receivers address in the center)
h. Print ten acronyms and abbreviations of your choosing, each separated by two lines.
Specify the data that the abbreviations and acronymsrepresent
CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimumscale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question - 3</title>
</head>
<body>

<div>
<p>1<sup>2</sup> = 1</p>
<p>2<sup>2</sup> = 4</p>
<p>3<sup>2</sup> = 9</p>
<p>4<sup>2</sup> = 16</p>
<p>5<sup>2</sup> = 25</p>
<p>6<sup>2</sup> = 36</p>
<p>7<sup>2</sup> = 49</p>
<p>8<sup>2</sup> = 64</p>
<p>9<sup>2</sup> = 81</p>
<p>10<sup>2</sup> = 100</p>
<p>11<sup>2</sup> = 121</p>
<p>12<sup>2</sup> = 144</p>
<p>13<sup>2</sup> = 169</p>
<p>14<sup>2</sup> = 196</p>
<p>15<sup>2</sup> = 225</p>
<p>16<sup>2</sup> = 256</p>
<p>17<sup>2</sup> = 289</p>
<p>18<sup>2</sup> = 324</p>
<p>19<sup>2</sup> = 361</p>
<p>20<sup>2</sup> = 400</p>
</div>

<h1>Unalphabetized list</h1>
Liam<sub>5</sub>
<br/>
Noah<sub>7</sub>
<br/>
Oliver<sub>8</sub>
<br/>
Elijah<sub>2</sub>
<br/>
Yuktika<sub>4</sub>
<br/>
James<sub>10</sub>
<br/>
William<sub>1</sub>
<br/>
Benjamin<sub>6</sub>
<br/>
Lucas<sub>3</sub>
<br/>
Henry<sub>9</sub>
<h1>Alphabetized list</h1>
<p>Benjamin</p>
<p>Elijah</p>
<p>Henry</p>
<p>James</p>
<p>Liam</p>
<p>Lucas</p>
<p>Noah</p>
<p>Oliver</p>
<p>Theodore</p>
<p>William</p>
<br><br>

<b>An unordered nested list:</b>
<ol type="I">
<li>Headings</li>
<li>Basic Text Sections</li>
<li>Lists</li>
<li>
<ol type="A">
<li>Ordered</li>
<li>
<ol type="1">
<li>The ol tag</li>
<li>
<ol type="a">
<li>TYPE</li>
<li>START</li>
<li>COMPACT</li>
</ol>
</li>
<li>The LI tag</li>
</ol>
</li>
<li>Unordered</li>
<li>
<ol type="1">
<li>The UL tag</li>
<li>The LI tag</li>
</ol>
</li>
<li>Definition</li>
<li>
<ol type="1">
<li>The DL tag</li>
<li>The DT tag</li>
<li>The DD tag</li>
</ol>
</li>
</ol>
</li>
<li>Miscellaneous</li>
</ol>
<br><br>

<ol type="a" start="7">
<li>seventh item</li>
<li>eighth item</li>
<li>ninth item</li>
</ol>
<br><br>

<h1>Cricket 2011</h1>
<hr style="width: 100%">
<p>India won world cup in 2011</p>
<br><br>

<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
<br><br>

<address>
8, Lokseva Chawl, New Link Rd, Opp Anand Nagar, Oshiwara, Jogeshwari (west)
<br>
Mumbai, Maharashtra, 400102 <br>
India
</address>
<br/><br/>
<address style="text-align: center;margin: 1rem auto;">
8, Lokseva Chawl, New Link Rd, Opp Anand Nagar, Oshiwara, Jogeshwari (west)
<br>
Mumbai, Maharashtra, 400102 <br>
India
</address>

<abbr title="Information Technology">IT</abbr>
<br/><br/>
<abbr title="Computer Science">CS</abbr>
<br/><br/>
<abbr title="Data Structure and Algorithms">DSA</abbr>
<br/><br/>
<abbr title="Data Base Management System">DBMS</abbr>
<br/><br/>
<abbr title="Electronics and Communication Engineering">ECE</abbr>
<br/><br/>
<abbr title=" Bachelor of Technology">B.Tech</abbr>
<br/><br/>
<abbr title="Indian Institute of Technology">IIT</abbr>
<br/><br/>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<br/><br/>
</body>
</html>

OUTPUT:
4) HTML IMAGE EXERCISES
a. Display five different images. Skip two lines between each image. Each image should
have a title.
b. Display an image that has a border ofsize 2, a width of 200, and a height of 200.
c. Display the image towards the right corner of thewebpage
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question - 4</title>
<style>
img {
width: 60rem;
}
.qb img {
border: solid yellow 2px;
width: 200px;
height: 200px;
}
.qc img {
float: right;
}
</style>
</head>
<body>
<section class="qa">
<h2>Question - 4(a)</h2>
<figure>
<img src="valley.png" alt="valley"/>
<figcaption>
valley
</figcaption>
</figure>
<br>
<br>
<figure>
<img src="space.png" alt="space"/>
<figcaption>
space
</figcaption>
</figure>
<br>
<br>
<figure>
<img src="horse.png" alt="Rider">
<figcaption>
Rider
</figcaption>
</figure>
<br>
<br>
<figure>
<img src="someething.png" alt="something.jpg">
<figcaption>
something
</figcaption>
</figure>
<br>
<br>
<figure>
<img src="hand.png" alt="hand">
<figcaption>
Hand
</figcaption>
</figure>
<br>
<br>
</section>
<section class="b-part">
<h2>Question - 4(b)</h2>
<img src="track.png" alt="road.jpg">
</section>
<section class="c-part">
<h2>Question - 4(c)</h2>
<img src="superman.png" alt="Transformer.jpg">
</section>
</body>
</html>

OUTPUT:
5) HTML TABLES
CODE:

6) HTML Forms Design the following Form

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="" style="margin: 0; padding: 0;">
<table style= "border: solid black 1px;">
<tr style="background-color: grey;">
<td colspan="2"><center>The World of Fruit</center></td>
</tr>
<tr>
<td colspan="2"><center>Fruit Survey</center></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td>How many pieces of fruit <br> do you eat per day</td>
<td>
<input type="radio" name="" id="" /> 0 <br />
<input type="radio" name="" id="" /> 1 <br />
<input type="radio" name="" id="" /> 2 <br />
<input type="radio" name="" id="" /> More than 2 <br />
</td>
</tr>
<tr>
<td>My favurite fruit</td>
<td>
<select name="" id="" scrolling="yes">
<option value="">Apple</option>
<option value="">Banana</option>
<option value="">Plum</option>
<option value="">Pomegrante</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
Would You like a brochure
</select>
</td>
</tr>
<tr>
<td>Would you like a <br> brochure</td>
<td><input type="checkbox" name="" id="" /></td>
</tr>
<tr>
<td colspan="2"><center><input type="button" value="Submit"></center></td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT:

7) HTML Frames. Design the following using frames.

CODE:

Index file code

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimumscale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question 7 - Frames</title>
<style>
body {
min-height: 100vh;
background-image: url("images/background.jpg");
background-size: 60%;
}
iframe {
width: 100%;
height: 100%;
}
main {
height: 100vh;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 4fr;
grid-auto-rows: 1fr;
}
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet
*/
color: blue; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text
*/
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
li {
margin-top: 2rem;
font-weight: 700;
}
.list {
text-transform: uppercase;
color: red;
font-size: 1.5rem;
text-decoration: underline;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 4rem;
}
</style>
</head>
<body>
<main>
<iframe style="grid-column: span 2" src="./amazonBookWorld.html"></iframe>
<div class="list">
<ul>
<li>User Login</li>
<li>User Profile</li>
<li>Books Catalog</li>
<li>Shopping Cart</li>
<li>Order Conformation</li>
<li>Payment</li>
</ul>
</div>
<iframe src="./userProfile.html"></iframe>
</main>
</body>
</html>

amazonBookWorld.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Amazon Book World</title>
<style>
h1 {
text-transform: uppercase;
color: red;
}
body {
background-image: url("images/question.png");
background-size: 5rem;
height: 256px;
background-color: #fff;
}
h1 {
text-align: center;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>Amazon Book World</h1>
</body>
</html>
userProfile.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User's Profile</title>
<style>
:root {
font-size: 1.1rem;
}
* {
box-sizing: border-box;
}
a:link {
color: darkviolet;
font-weight: 700;
}
header, footer {
text-align: center;
color: darkviolet;
}
body {
background-color: #98cefd;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
footer {
margin-top: 2rem;
font-size: 1.5rem;
}
main {
margin: auto;
}
table, td, th {
border: solid 4px whitesmoke;
padding: .75rem .5rem;
background-color: #bfbfbf;
}
table {
border: 10px outset whitesmoke;
margin-top: 2rem;
margin-bottom: 2rem;
border-collapse: collapse;
}
</style>
</head>
<body>
<header>
<h1>User's Profile</h1>
</header>
<main>
<table>
<thead>
<tr>
<th>S. no</th>
<th>User name</th>
<th>DOB</th>
<th>Address</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ramu P</td>
<td>12th Jan 1980</td>
<td>H No: 22/12/1, M.G.Road, Vij</td>
<td>Engineer</td>
</tr>
<tr>
<td>2</td>
<td>Mohan R.</td>
<td>23rd May 1982</td>
<td>H.No: 22/12/11, Patel Road, Hyd.</td>
<td>Driver</td>
</tr>
<tr>
<td>3.</td>
<td>Pavani V</td>
<td>27th July 1983</td>
<td>H. no: 12/25, Ameerpet, Hyd.</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>4.</td>
<td>Seshu D</td>
<td>07th March 1984</td>
<td>H No:1/99, S.R.Nagar, Hyd</td>
<td>DBA</td>
</tr>
<tr>
<td>5.</td>
<td>Surendra</td>
<td>29rd May 1982</td>
<td>H No: 22/12/11, Bala Nagar, Hyd.</td>
<td>Professor</td>
</tr>
</tbody>
</table>
</main>
<footer>
<a href="#">Home</a>
</footer>
</body>
</html>

OUTPUT:

8) Create an external style sheet named as “external.css” and provide some styles for h2,
p and body tags. Create an html file named as “welcome.html” and link the external style
sheet. Include internal style sheet for body tags. Include a
tags with inline style sheet.
CODE:
Html code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimumscale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question 8 - Welcome</title>
<link rel="stylesheet" href="external.css">
<style>
body {
background-color: #888888;
color: #000000;
}
</style>
</head>
<body>
<main>
<img src="tree.png" alt="tree-picture">
<div style="margin-right: 4rem;">
<div class="greet">
<h2>Hello World!</h2>
<p style="padding-left: 2.75rem;">
This example contains some advance CSS methods you may not have
learned yet. But, we will explain these methods in a later chapter in the
tutorial
</p>
</div>
<div class="some-text">
<p>This is some text in a paragraph</p>
</div>
</div>
</main>
</body>
</html>

Css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
h2 {
font-size: 2rem;
}
main {
display: flex;
gap: 1rem;
}
p {
padding: .25rem .75rem;
}
.some-text {
border-width: 3px;
border-style: dotted solid dashed solid;
}
.greet {
background-color: #e3e3e3;
margin-top: 2rem;
margin-right: .75rem;
margin-bottom: 2rem;
padding: 2rem 2rem;
}

OUTPUT:
9) Write the CSS code necessary to recreate the following appearance on-screen, exactly as
shown.

The menu items (Summaryto Trailers and Videos) are white text on a black background.

There is 20px space between the words and the right and left sides of their black boxes.

There is 3px of blank space to the right of each.

• The score information should be 50% wide.

• The movie rating has a green background and white text. The number is in 30pt font. There is
20px space between the number and the edges of the green background. There is 5px blank
space around the green background.

• The background color of the page is gray but the background color of the area containing
everything is white. The white area is 80% wide and centered. There is 20px of space between
the edge of the white background and everything inside it.

CODE:

OUTPUT:

10) Write the HTML and CSS box model to recreate the following appearance. No manual line
breaks have been inserted

CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimumscale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question 10 - Broad Band Price Table</title>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=O
pen+Sans:wght@400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
margin: 3rem auto;
}
body {
color: white;
font-family: 'Open Sans', sans-serif;
background-image: url("bc.jpg");
text-align: center;
}
button {
margin-top: 1rem;
padding: 1rem 3rem;
border: none;
border-radius: .15rem;
color: inherit;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
}
footer {
margin-top: 5rem;
}
footer a:link {
color: green;
text-decoration: none;
}
footer a:hover {
color: green;
text-decoration: underline;
}
main {
display: flex;
gap: 1rem;
justify-content: center;
margin: auto;
flex-wrap: wrap;
}
svg {
width: 1.2rem;
fill: white;
}
.card {
border-radius: .1rem;
overflow: hidden;
border: solid 1px grey;
margin-top: 2rem;
min-width: 20%;
padding-bottom: 3rem;
background-color: rgba(0, 0, 0, 35%);
}
.card-1 > .heading, .card-1 button {
background-color: hsl(9, 92%, 61%);
}
.card-2 > .heading, .card-2 button {
background-color: hsl(326, 61%, 49%);
}
.card-3 > .heading, .card-3 button {
background-color: hsl(165, 60%, 47%);
}
.card-1 button:hover {
background-color: hsl(9, 92%, 72%);
}
.card-2 button:hover {
background-color: hsl(326, 61%, 60%);
}
.card-3 button:hover {
background-color: hsl(165, 60%, 58%);
}
.heading {
padding: 2.5rem 4rem;
font-size: 1.5rem;
font-weight: bolder;
}
.description {
padding: 3.5rem 1.5rem 2rem;
list-style: none;
}
.description li {
display: flex;
justify-content: start;
gap: 1rem;
margin-top: 1rem;
padding-left: 20%;
letter-spacing: .1em;
}
</style>
</head>
<body>
<header>
<h1>Broad band price table</h1>
</header>
<main>
<div class="card card-1">
<div class="heading">
Standard
</div>
<ul class="description">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-
12.5-32.8-12.5-
45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5
12.5-32.8 0-45.3s-32.8-12.5-
45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64
64H448c35.3 0 64-28.7 64-
64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5
352H64zM432 456c-13.3 0-24-
10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/>
</svg>
<span>Unlimited Download</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3
32
32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-
32 32-32zM0
192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8
7.2 16 16 16h32c8.8 0
16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2
16 16 16h32c8.8 0 16-7.2
16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/>
</svg>
<span>20GB Storage</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512
114.6 512
256zM320 352c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24
24V292.7c-23.5 9.5-40 32.5-40
59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176c17.7 0 32-14.3 32-32s-14.3-
32-32-32s-32 14.3-32 32s14.3
32 32 32zm-16 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-
32zm288 32c17.7 0 32-14.3
32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM400 144c0-17.7-14.3-32-32-
32s-32 14.3-32 32s14.3 32
32 32s32-14.3 32-32z"/>
</svg>
<span>Unlimited Speed</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-
28.7 64-64V96c0-
35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24
24s-10.7 24-24 24zm96-
24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-
35.3 0-64 28.7-64 64v64c0
35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344
408c-13.3 0-24-10.7-24-
24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-
24-10.7-24-24s10.7-24 24-
24s24 10.7 24 24z"/>
</svg>
<span>30 Domains</span>
</li>
</ul>
<button>Get Started</button>
</div>
<div class="card card-2">
<div class="heading">
Enhanced
</div>
<ul class="description">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-
12.5-32.8-12.5-
45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5
12.5-32.8 0-45.3s-32.8-12.5-
45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64
64H448c35.3 0 64-28.7 64-
64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5
352H64zM432 456c-13.3 0-24-
10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/>
</svg>
<span>Unlimited Download</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3
32
32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-
32 32-32zM0
192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8
7.2 16 16 16h32c8.8 0
16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2
16 16 16h32c8.8 0 16-7.2
16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/>
</svg>
<span>20GB Storage</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512
114.6 512
256zM320 352c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24
24V292.7c-23.5 9.5-40 32.5-40
59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176c17.7 0 32-14.3 32-32s-14.3-
32-32-32s-32 14.3-32 32s14.3
32 32 32zm-16 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-
32zm288 32c17.7 0 32-14.3
32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM400 144c0-17.7-14.3-32-32-
32s-32 14.3-32 32s14.3 32
32 32s32-14.3 32-32z"/>
</svg>
<span>Unlimited Speed</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-
28.7 64-64V96c0-
35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24
24s-10.7 24-24 24zm96-
24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-
35.3 0-64 28.7-64 64v64c0
35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344
408c-13.3 0-24-10.7-24-
24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-
24-10.7-24-24s10.7-24 24-
24s24 10.7 24 24z"/>
</svg>
<span>30 Domains</span>
</li>
</ul>
<button>Get Started</button>
</div>
<div class="card card-3">
<div class="heading">
Unlimited
</div>
<ul class="description">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-
12.5-32.8-12.5-
45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5
12.5-32.8 0-45.3s-32.8-12.5-
45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64
64H448c35.3 0 64-28.7 64-
64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5
352H64zM432 456c-13.3 0-24-
10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/>
</svg>
<span>Unlimited Download</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3
32
32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-
32 32-32zM0
192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8
7.2 16 16 16h32c8.8 0
16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2
16 16 16h32c8.8 0 16-7.2
16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/>
</svg>
<span>20GB Storage</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512
114.6 512
256zM320 352c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24
24V292.7c-23.5 9.5-40 32.5-40
59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176c17.7 0 32-14.3 32-32s-14.3-
32-32-32s-32 14.3-32 32s14.3
32 32 32zm-16 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-
32zm288 32c17.7 0 32-14.3
32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM400 144c0-17.7-14.3-32-32-
32s-32 14.3-32 32s14.3 32
32 32s32-14.3 32-32z"/>
</svg>
<span>Unlimited Speed</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-
28.7 64-64V96c0-
35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24
24s-10.7 24-24 24zm96-
24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-
35.3 0-64 28.7-64 64v64c0
35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344
408c-13.3 0-24-10.7-24-
24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-
24-10.7-24-24s10.7-24 24-
24s24 10.7 24 24z"/>
</svg>
<span>30 Domains</span>
</li>
</ul>
<button>Get Started</button>
</div>
</main>
<footer>
<p>Ⓒ️ 2018 Broad Band Price Table. All rights reserved | Design by <a
href="#">W3layouts</a></p>
</footer>
</body>
</html>

OUTPUT:

11) Design the following web page using HTML5 and CSS:
CODE:

OUTPUT:

12) Design a web page with HTML and bootstrap tags to the following components:
• List a few vegetables and fruits using the bootstrap dl tag • Display one of your previous code
using tag
• List 10 shortcut keys of Microsoft word with the highlighted background.
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ques-5</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<style>
.key{
padding: 1rem ;
background-color: grey;
border: 1px solid black;
border-radius: 0.75rem;
}
dd{
margin: 2rem;
}
.keys{
margin-bottom: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div id="vegetables">
<h2>Vegetables</h2>
<dl>
<dt>Carrots</dt>
<dt>Broccoli</dt>
<dt>Mushrooms</dt>
<dt>Kale</dt>
<dt>Turnips</dt>
<dt>Bell Peppers</dt>
<dt>Asparagus</dt>
<dt>Cauliflower</dt>
<dt>Green Beans</dt>
<dt>Beets</dt>
<dt>Onions</dt>
<dt>Tomatoes</dt>
<dt>Eggplant</dt>
<dt>Sweet Potato</dt>
</dl>
</div>
<div id="fruits" class="mt-5">
<h2>Fruits</h2>
<dl>
<dt>Lemons.</dt>
<dt>Strawberries</dt>
<dt>Oranges</dt>
<dt>Limes</dt>
<dt>Grapefruit</dt>
<dt>Blackberries</dt>
<dt>Apples</dt>
<dt>Pomegranate</dt>
</dl>
</div>
<h2 class="mt-5">Code</h2>
<code>#include<stdio.h><br>int main(void) { <br>printf("Hello
World\n");<br>return 0; <br>}</code>
<div id="shortcut-keys" class="mt-5 keys">
<h2>Shortcut Keys</h2>
<dl>
<dt><span class="key">Ctrl</span> + <span class="key">F</span></dt>
<dd>Finds the occurrence of text in the document</dd>
<dt><span class="key">Ctrl</span> + <span class="key">H</span></dt>
<dd>Finds and replace the desired text with the given text</dd>
<dt><span class="key">Ctrl</span> + <span class="key">B</span></dt>
<dd>Bolds the text</dd>
<dt><span class="key">Ctrl</span> + <span class="key">I</span></dt>
<dd>Italicizes the text</dd>
<dt><span class="key">Ctrl</span> + <span class="key">U</span></dt>
<dd>Underlines the text</dd>
<dt><span class="key">Ctrl</span> + <span class="key">Shift</span> + <span
class="key">></span></dt>
<dd>Increases the font size</dd>
<dt><span class="key">Ctrl</span> + <span class="key">Shift</span> + <span
class="key"><</span></dt>
<dd>Decreases the font size</dd>
<dt><span class="key">Ctrl</span> + <span class="key">A</span></dt>
<dd>Selects all text</dd>
<dt><span class="key">Ctrl</span> + <span class="key">C</span></dt>
<dd>Copies the text</dd>
<dt><span class="key">Ctrl</span> + <span class="key">X</span></dt>
<dd>Cuts the text</dd>
</dl>
</div>
</div>
</body>
</html>

OUTPUT:

13) Apply the container and fluid-container of bootstrap to display the poster mentioned in
question number 10.

CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ques-8</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<style>
@import
url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=O
pen+Sans:wght@400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
margin: 3rem auto;
}
body {
color: white;
font-family: 'Open Sans', sans-serif;
background-image: url("bc.jpg");
text-align: center;
}
button {
margin-top: 1rem;
padding: 1rem 3rem;
border: none;
border-radius: .15rem;
color: inherit;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
}
footer {
margin-top: 5rem;
}
footer a:link {
color: green;
text-decoration: none;
}
footer a:hover {
color: green;
text-decoration: underline;
}
main {
display: flex;
gap: 1rem;
justify-content: center;
margin: auto;
flex-wrap: wrap;
}
svg {
width: 1.2rem;
fill: white;
}
.card {
border-radius: .1rem;
overflow: hidden;
border: solid 1px grey;
margin-top: 2rem;
min-width: 20%;
padding-bottom: 3rem;
background-color: rgba(0, 0, 0, 35%);
}
.card-1 > .heading, .card-1 button {
background-color: hsl(9, 92%, 61%);
}
.card-2 > .heading, .card-2 button {
background-color: hsl(326, 61%, 49%);
}
.card-3 > .heading, .card-3 button {
background-color: hsl(165, 60%, 47%);
}
.card-1 button:hover {
background-color: hsl(9, 92%, 72%);
}
.card-2 button:hover {
background-color: hsl(326, 61%, 60%);
}
.card-3 button:hover {
background-color: hsl(165, 60%, 58%);
}
.heading {
padding: 2.5rem 4rem;
font-size: 1.5rem;
font-weight: bolder;
}
.description {
padding: 3.5rem 1.5rem 2rem;
list-style: none;
}
.description li {
display: flex;
justify-content: start;
gap: 1rem;
margin-top: 1rem;
padding-left: 20%;
letter-spacing: .1em;
}
</style>
</head>
<body>
<header>
<h1>Broad band price table</h1>
</header>
<main class="container-fluid">
<div class="card card-1">
<div class="heading">
Standard
</div>
<ul class="description">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-
12.5-32.8-12.5-
45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5
12.5-32.8 0-45.3s-32.8-12.5-
45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64
64H448c35.3 0 64-28.7 64-
64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5
352H64zM432 456c-13.3 0-24-
10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/>
</svg>
<span>Unlimited Download</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3
32
32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-
32 32-32zM0
192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8
7.2 16 16 16h32c8.8 0
16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2
16 16 16h32c8.8 0 16-7.2
16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/>
</svg>
<span>20GB Storage</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512
114.6 512
256zM320 352c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24
24V292.7c-23.5 9.5-40 32.5-40
59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176c17.7 0 32-14.3 32-32s-14.3-
32-32-32s-32 14.3-32 32s14.3
32 32 32zm-16 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-
32zm288 32c17.7 0 32-14.3
32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM400 144c0-17.7-14.3-32-32-
32s-32 14.3-32 32s14.3 32
32 32s32-14.3 32-32z"/>
</svg>
<span>Unlimited Speed</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-
28.7 64-64V96c0-
35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24
24s-10.7 24-24 24zm96-
24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-
35.3 0-64 28.7-64 64v64c0
35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344
408c-13.3 0-24-10.7-24-
24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-
24-10.7-24-24s10.7-24 24-
24s24 10.7 24 24z"/>
</svg>
<span>30 Domains</span>
</li>
</ul>
<button class="">Get Started</button>
</div>
<div class="card card-2">
<div class="heading">
Enhanced
</div>
<ul class="description">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-
12.5-32.8-12.5-
45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5
12.5-32.8 0-45.3s-32.8-12.5-
45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64
64H448c35.3 0 64-28.7 64-
64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5
352H64zM432 456c-13.3 0-24-
10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/>
</svg>
<span>Unlimited Download</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3
32
32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-
32 32-32zM0
192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8
7.2 16 16 16h32c8.8 0
16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2
16 16 16h32c8.8 0 16-7.2
16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/>
</svg>
<span>20GB Storage</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512
114.6 512
256zM320 352c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24
24V292.7c-23.5 9.5-40 32.5-40
59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176c17.7 0 32-14.3 32-32s-14.3-
32-32-32s-32 14.3-32 32s14.3
32 32 32zm-16 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-
32zm288 32c17.7 0 32-14.3
32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM400 144c0-17.7-14.3-32-32-
32s-32 14.3-32 32s14.3 32
32 32s32-14.3 32-32z"/>
</svg>
<span>Unlimited Speed</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-
28.7 64-64V96c0-
35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24
24s-10.7 24-24 24zm96-
24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-
35.3 0-64 28.7-64 64v64c0
35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344
408c-13.3 0-24-10.7-24-
24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-
24-10.7-24-24s10.7-24 24-
24s24 10.7 24 24z"/>
</svg>
<span>30 Domains</span>
</li>
</ul>
<button class="">Get Started</button>
</div>
<div class="card card-3">
<div class="heading">
Unlimited
</div>
<ul class="description">
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-
12.5-32.8-12.5-
45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5
12.5-32.8 0-45.3s-32.8-12.5-
45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64
64H448c35.3 0 64-28.7 64-
64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5
352H64zM432 456c-13.3 0-24-
10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/>
</svg>
<span>Unlimited Download</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3
32
32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-
32 32-32zM0
192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8
7.2 16 16 16h32c8.8 0
16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2
16 16 16h32c8.8 0 16-7.2
16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16
16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16
16h32c8.8 0 16-7.2 16-
16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/>
</svg>
<span>20GB Storage</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512
114.6 512
256zM320 352c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24
24V292.7c-23.5 9.5-40 32.5-40
59.3c0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176c17.7 0 32-14.3 32-32s-14.3-
32-32-32s-32 14.3-32 32s14.3
32 32 32zm-16 80c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-
32zm288 32c17.7 0 32-14.3
32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM400 144c0-17.7-14.3-32-32-
32s-32 14.3-32 32s14.3 32
32 32s32-14.3 32-32z"/>
</svg>
<span>Unlimited Speed</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-
28.7 64-64V96c0-
35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24
24s-10.7 24-24 24zm96-
24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-
35.3 0-64 28.7-64 64v64c0
35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344
408c-13.3 0-24-10.7-24-
24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-
24-10.7-24-24s10.7-24 24-
24s24 10.7 24 24z"/>
</svg>
<span>30 Domains</span>
</li>
</ul>
<button class="">Get Started</button>
</div>
</main>
<footer>
<p>Ⓒ️ 2018 Broad Band Price Table. All rights reserved | Design by <a
href="#">W3layouts</a></p>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"
integrity="sha384-
kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
</html>

OUTPUT:

14) Develop the following output by using bootstrap grids

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="fluid-container">
<div class="row justify-content-center">
<div class="h1">Pricing</div>
</div>
<div class="card-deck text-center">
<div class="card ">
<div class="card-header">
<h5 class="card-title">Free</h5>
</div>
<div class="card-body">
<p class="card-text">
<div class="d-flex flex-row justify-content-center">
<h1 class=" d-flex font-weight-bold">$10</h1><h3 class="font-weight-light">/
mo</h3>
</div>
10 users included <br>
2 GB if storage <br>
Email support <br>
Help center <br>
</p>
<div class="d-flex btn btn-outline-primary justify-content-
center">Button</div>

</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Pro</h5>
</div>
<div class="card-body">
<div class="d-flex flex-row justify-content-center">
<h1 class=" d-flex font-weight-bold">$15</h1><h3 class="font-weight-light">/
mo</h3>
</div>
<p class="card-text">
15 users included <br>
10 GB if storage <br>
Priority Email support <br>
Help center <br>
</p>
<div class="d-flex btn btn-outline-primary justify-content-
center">Button</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Enterprise</h5>
</div>
<div class="card-body">
<div class="d-flex flex-row justify-content-center">
<h1 class=" d-flex font-weight-bold">$29</h1><h3 class="font-weight-light">/
mo</h3>
</div>
<p class="card-text">
30 users included <br>
15 GB of storage <br>
Phone and Email support <br>
Help center access <br>
</p>
<div class="d-flex btn btn-outline-primary justify-content-
center">Button</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
OUTPUT:
School of Information Technology
and Engineering
BITE304P
Web Technologies Laboratory
Assessment-2
JavaScript-JQuery-AngularJS-JSON-
AJAX- Exercises
1. A parking garage charges a $2.00 minimum fee to park for up to three hours. The garage charges
an additional $0.50 per hour for each hour or part thereof above three hours. The maximum charge for
any given 24-hour period is $10.00. Assume that no car parks for longer than 24 hours at a time.
Write a script that calculates and displays the parking charges for each customer who parked a car in
this garage yesterday. You should input from the user the hours parked for each customer. The
program should display the charge for the current customer and should calculate and display the
running total of yesterday's receipts. The program should use the function calculateCharges to
determine the charge for each customer. Use a prompt dialog to obtain input from the user.
CODE

<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 1</title>
</head>
<body>
<script>
function calculateCharges(hours) {
if (hours <= 3) {
return 2.00;
} else if (hours <= 24) {
const cost = 2.00 + (hours - 3) * 0.50;
if(cost <= 10){
return cost;
}
else
return 10.00 ;
} else {
return 10.00;
}
}
let totalReceipts = 0;
let hours = prompt("Enter hours parked (or 'done' to finish):");
hours = parseFloat(hours);
if (isNaN(hours) || hours < 0) {
alert("Invalid input!");
}
let charge = calculateCharges(hours);
totalReceipts += charge;
alert(`Charge for ${hours} hours: $${charge.toFixed(2)}`);
alert(`Total receipts: $${totalReceipts.toFixed(2)}`);
document.write(`<h1>The total for the user was
${totalReceipts}$</h1>`)
</script>
</body>
</html>
OUTPUT
2. Create a web page containing three divisions.

a) The first division displays a digital clock on the rightmost end.

b) The width of the first division is 100%. The second division and third division lay side by side. c)
The second division has an image slider and the third division has a color picker and two list boxes
having font family and size and a button. When a button is clicked the background color, font, and
font size should change for a whole page. Use JavaScript to implement the above.
CODE:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 2</title>
<link
href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200ita
lic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800
,800italic,900,900italic" rel="stylesheet" />
<style>
* {
font-family: Poppins;
margin: 0;
padding: 0;
}

#clock {
width: 100%;
/* height: 30%; */
font-size: 50px;
font-weight: bold;
text-align: center;
/* margin: 50px auto; */
padding-top: 6%;
background-color: bisque;
}

.second {
position: relative;
}

#image {
position: absolute;
top: 21%;
left: 0;
background-color: #aaa;
width: 50%;
}

#color {
position: absolute;
top: 26%;
left: 50%;
width: 50%;
background-color: #aca;
height: 60vh;
padding: 2% 4%;
}

label {
display: inline-block;
margin-bottom: 10px;
}

input[type="color"] {
border: none;
height: 30px;
width: 30px;
padding: 0;
vertical-align: middle;
}

.slider {
width: 259px;
margin: 50px auto;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}

img {
scroll-snap-align: start;
width: 100%;
height: auto;
}

.controls {
display: flex;
justify-content: space-between;
margin-top: 10px;
}

button {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}

button:focus {
outline: none;
}

.prev {
transform: rotate(180deg);
}
</style>
</head>

<div class="image_slider" id="image">

</div>

<div class="color_picker" id="color">

<label for="colorPicker">Select a color:</label>
<input type="color" id="colorPicker">
</div>
</div>
<script>
function updateClock() {
const clock = document.getElementById("clock");
const now = new Date();
const hours = now.getHours().toString().padStart(2, "0");
const minutes = now.getMinutes().toString().padStart(2, "0");
const seconds = now.getSeconds().toString().padStart(2, "0");
clock.textContent = `${hours}:${minutes}:${seconds}`;
}

setInterval(updateClock, 1000);

//Color Picker
const colorPicker = document.getElementById("colorPicker");

colorPicker.addEventListener("input", (event) => {

const color = event.target.value;
const bg = document.querySelector('.color_picker');
bg.style.backgroundColor = color;

});

//Image Slider
const slides = document.querySelector(".slides");
const prevButton = document.querySelector(".prev");
const nextButton = document.querySelector(".next");

let currentSlide = 0;

function showSlide(n) {
const slideWidth = slides.clientWidth;
const maxSlides = slides.children.length;
currentSlide = (n + maxSlides) % maxSlides;
slides.scrollTo({
left: currentSlide * slideWidth,
behavior: "smooth"
});
}

prevButton.addEventListener("click", () => {
showSlide(currentSlide - 1);
});

nextButton.addEventListener("click", () => {
showSlide(currentSlide + 1);
});

showSlide(currentSlide);
</script>
</body>

</html>

OUTPUT:

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

<!DOCTYPE html>
<html lang="en">

#phrase {
width: 10%;
}

#filter {
width: 7%;
}

#words {
margin-top: 15px;
}

.word {
color: red;
border: 2px dotted red;
margin: 0 5px;
margin-top: 15px;
font-size: 23px;
padding: 5px 7px;
}

.string {
margin-top: 15px;
}
</style>
</head>

<body>
<h1>Sentence Reverser!</h1>
<div class="phrase">
<label for="phrase">Phrase:</label>
<input type="text" id="phrase">
</div>
<div class="filter">
<label for="filter">Filter: </label>
<input type="text" id="filter">
</div>
<div class="but"><button>Go</button></div>
<div id="words"></div>
<div class="string"></div>
</body>
<script>
const phraseInput = document.querySelector('#phrase');
const filterInput = document.querySelector('#filter');
const wordDiv = document.querySelector('#words');
const strings = document.querySelector('.string');
const goButton = document.querySelector('.but');
const span = document.createElement("span");

const sentenceReverse = () => {

for (let i = 0; i < wordsArray.length; i++) {

if (i % 2 == 0) {

wordDiv.innerHTML += `<span
class='word'><u>${wordsArray[i]}</u></span>`;
} else {

wordDiv.innerHTML += `<span
class='word'>${wordsArray[i]}</span>`;
}
}

goButton.addEventListener('click', sentenceReverse);
</script>

</html>

OUTPUT:
4. Design a student registration form that takes the student's name, register number, DOB, program,
email id, temporary address, permanent address, and phone number. Validate the following using
JavaScript/JQuery:
a) The mobile number should be exactly 10 digits.
b) Register numbers should have alphabets and numbers only.
c) The name should not exceed 30 characters and can be only alphabets.
d) Email validation.
e) Provide a checkbox saying “Permanent address is same as temporary address”. If checked, the
value of the permanent address should be added automatically from the temp address. And should be
in disabled mode.
CODE:

<!DOCTYPE html>
<html>

<head>
<title>Student Registration Form</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#permanent_address').prop('disabled', true);
$('#same_as_temp').change(function() {
if (this.checked) {
$('#permanent_address').val($('#temp_address').val());
$('#permanent_address').prop('disabled', true);
} else {
$('#permanent_address').prop('disabled', false);
$('#permanent_address').val('');
}
});
$('#register_form').submit(function(e) {
e.preventDefault();
var valid = true;
var name = $('#name').val();
var reg_num = $('#reg_num').val();
var dob = $('#dob').val();
var program = $('#program').val();
var email = $('#email').val();
var temp_address = $('#temp_address').val();
var permanent_address = $('#permanent_address').val();
var phone = $('#phone').val();
if (!/^[a-zA-Z ]{1,30}$/.test(name)) {
alert("Please enter a valid name.");
valid = false;
}
if (!/^[a-zA-Z0-9]+$/.test(reg_num)) {
alert("Please enter a valid register number.");
valid = false;
}
if (!/^\d{10}$/.test(phone)) {
alert("Please enter a valid 10-digit phone number.");
valid = false;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert("Please enter a valid email address.");
valid = false;
}
if ($('#same_as_temp').is(':not(:checked)') &&
permanent_address === '') {
alert("Please enter a valid permanent address.");
valid = false;
}
if (valid) {
alert("Registration successful!");
// You can submit the form here.
}
});
});
</script>
</head>

<body>
<form id="register_form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="30" required>
<br><br>
<label for="reg_num">Register Number:</label>
<input type="text" id="reg_num" name="reg_num" required>
<br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<br><br>
<label for="program">Program:</label>
<input type="text" id="program" name="program" required>
<br><br>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="temp_address">Temporary Address:</label>
<textarea id="temp_address" name="temp_address" required></textarea>
<br><br>
<label for="permanent_address">Permanent Address:</label>
<textarea id="permanent_address" name="permanent_address"></textarea>
<br><br>
<input type="checkbox" id="same_as_temp" name="same_as_temp">Permanent
address is same as temporary address.
<br><br>

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

<!DOCTYPE html>
<html lang="en">

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

<button id="add">add</button>
<button id="remove">remove</button>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var items = [];
var ulist = $("ul");
var list = function(i, x) {
ulist.append(`<li id=${x}>${i}</li>`);
}
var colist = function(i, x) {
ulist.append(`<li id=${x} class="yel">${i}</li>`);
}
var color = function() {
// $("ul li").css("background-color", "white");
$("ul li").remove();
for (i in items) {
if (i % 2 == 0) {

list(items[i], i);
} else {
colist(items[i], i);
}
}
// $("ul li:nth-child(2)").css("background-color", "yellow");
}
var i = 0;
var addBtn = $('#add');
addBtn.click(function() {
var inputVal = $("input").val();
$('input').val("");
items.push(inputVal);
// list(items[i], i);
// i++;

color();
})
var remBtn = $('#remove');
remBtn.click(function() {
// i -= 1;
var inputVal = $("input").val();
var newItems = [];
for (y in items) {
if (inputVal.toLowerCase() != items[y].toLowerCase()) {
newItems.push(items[y]);
}
}
items = newItems;

// var x = 0;
// if (inputVal.toLowerCase() == items[y].toLowerCase()) {
// var items = items.filter(function(inputVal) {
// return inputVal.toLowerCase() !=
items[y].toLowerCase();
// })

// var last = $(`#${y}`);

// last.remove();
// break;
// }

$('input').val("");
color();
})

})
</script>

</html>

OUTPUT:
6. Develop a JSON program for creating 20 students' personal information using the following fields
as input and print the outputs in table format (Use any Javascript/JQuery/AngularJS). student name,
date_of_birth(date,month,year),parents(fathers_name,mothers_name),
blood_group,email,phone(landline,mobile),address(door_no,street_name,place_name, pincode,
country),degree(ug,pg and others).
CODE:
OUTPUT:
8. Develop a web application using AngularJS and add behavior to the following HTML code. The
page contains a text input box with an id of foodname, and a drop-down list with an id of foodgroup.
i. The user types a name of a food item into the foodname text box, such as apple or Cookie, selects a
food group from the drop-down list, such as dairy or fruit, and then clicks the button with an id of eat.
ii. When the eat button is clicked, any element on the page that matches all of the following criteria
will be removed from the page: a. The element is an img element that has a class of food. b. The
element's food group matches the group chosen in the foodgroup drop-down list. Food groups are
represented as class attributes. This is in addition to the food class; recall that class attributes can
specify multiple classes separated by spaces. For example, a jug of milk would have the following

element:
c. The food item's name is the same as the text in the foodname box. The food's name is stored as the
image's alt attribute. For example, if the user types cookie, img elements with an alt of cookie will be
removed. Your code should be case-insensitive; for example, coOKIe should match images with an
alt of cookie.
CODE:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></s
cript>

</head>

<body>
<div ng-app="myApp" ng-controller="jsCtrl1">
Name of Food: <input id="foodname" type="text" ng-model="foodname" />
Food Group:
<select id="foodgroup" ng-model="foodgroup">
<option>dairy</option>
<option>fats</option>
<option>fruit</option>
<option>meat</option>
<option>veggies</option>
</select>
<button id="eat" ng-click="remove()">Eat!</button>
<div ng-switch="foodgroup">
<div ng-switch-when="dairy">
<img src="milk.png" class="food dairy" alt="milk" ng-
hide="milk" ng-model="milk" />
</div>
<div ng-switch-when="fats">
<img src="cookies.png" class="food fats" alt="cookie" ng-
hide="cookie" ng-model="cookie" />
<img src="chips.png" class="fats food other" alt="chips" ng-
hide="chips" ng-model="chips" />
</div>
<div ng-switch-when="fruit">
<img src="apple.png" class="fruit yummy food" alt="apple" ng-
hide="apple" ng-model="apple" />
<img src="tamato.png" class="fruit food" alt="tomato" ng-
hide="tomato" ng-model="tomato" />
</div>
<div ng-switch-when="meat">
<img src="steak.png" class="food meat" alt="steak" ng-
hide="steak" ng-model="steak" />
</div>
<div ng-switch-when="veggies">
<img src="broc.png" class="food veggies" alt="broccoli" ng-
hide="broccoli" ng-model="broccoli" />
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl1', function($scope) {

$scope.foodname = $scope.foodname ? $scope.foodname.toLowerCase()

: "";
$scope.remove = function() {

switch ($scope.foodname) {
case 'cookie':
$scope.cookie = "true";
$scope.foodname = "";
break;
case 'apple':
$scope.apple = "true";
$scope.foodname = "";
break;
case 'tomato':
$scope.tomato = "true";
$scope.foodname = "";
break;
case 'milk':
$scope.milk = "true";
$scope.foodname = "";
break;
case 'chips':
$scope.chips = "true";
$scope.foodname = "";
break;
case 'steak':
$scope.steak = "true";
$scope.foodname = "";
break;
}

}
});
</script>
</body>

</html>

OUTPUT:

9. For the given form layout below, use the AngularJS code to perform form validation using a regular
expression on the following fields : i. All elements marked * are required elements that should be
validated. ii. The Name should contain alphabets iii. Validate Email element iv. The Zipcode should
be a length of 6 digits and the Phone of length 10 digits v. The password should be in the range of 6-8
characters and the Password and Verify password should match. Display the possible validation error
messages.
CODE:

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></s
cript>
<style>
.red {
color: red;
}

table {
border: 2px solid black;
border-collapse: collapse;
}

th,
td {
padding: 15px 15px;
}
</style>

<body>

<h1>Account Opening Form</h1>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm"
novalidate>
<table>
<tr>
<th colspan="2">Personal Details</th>
</tr>
<tr>
<td>
<label for="name">Name*</label>
</td>
<td>
<input type="text" name="name" ng-model="name" ng-
pattern="/^[a-zA-Z]+$/" required><br>
<span ng-show="myForm.name.$error.pattern" class="red">
Only alphabets are allowed.
</span>
</td>
</tr>
<tr>
<td>
<label for="nameOf">Name of
<br><i>(Father/Guardian)</i></label>
</td>
<td>
<input type="text" name="nameOf" ng-model="nameOf">
</td>
</tr>
<tr>
<td><label for="dob">Date of Birth*(dd-mm-yy)</label></td>
<td>
<input type="date" name="dob" id="dob" ng-model="dob" ng-
pattern="/^(0[1-9]|{12}[0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/">

<div ng-show="myForm.dob.$dirty && myForm.dob.$invalid">

<span ng-show="myForm.dob.$error.required"
class="red">Date of Birth is required.</span>
<span ng-show="myForm.dob.$error.pattern"
class="red">Please enter a valid date in format dd-mm-yyyy.</span>
</div>
</td>

</tr>
<tr>
<td><label for="gender">Gender*</label></td>
<td>
<input type="radio" name="gender" id="male" ng-
model="gender" value="male" ng-required="true">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" ng-
model="gender" value="female" ng-required="true">
<label for="female">Female</label>
</td>
<div ng-show="myForm.$submitted || myForm.gender.$touched">
<div ng-show="myForm.gender.$error.required">Please select
a gender.</div>
</div>

</tr>

<tr>
<td>
<label for="nation">Nationality</label>
</td>
<td><input type="text" id="nation" ng-model="nation"></td>
</tr>
<tr>
<td><label for="gender">Account Type*</label></td>
<td>
<input type="radio" name="acc" id="savings" ng-model="acc"
value="savings" ng-required="true">
<label for="savings">Savings</label>
<input type="radio" name="acc" id="fixed" ng-model="acc"
value="fixed" ng-required="true">
<label for="fixed">Fixed</label>
</td>
<div ng-show="myForm.$submitted || myForm.gender.$touched">
<div ng-show="myForm.gender.$error.required">Please select
a gender.</div>
</div>
</tr>
<tr>
<td>
Preferences
</td>
<td>
<label><input type="checkbox" name="preference"
value="internet_banking"> Internet Banking</label>
<label><input type="checkbox" name="preference"
value="mobile_banking"> Mobile Banking</label>
<label><input type="checkbox" name="preference"
value="sms_alerts"> SMS Alerts</label> </td>
</tr>
<tr>
<td>
<label for="address">Address</label>
</td>
<td>
<textarea id="address" name="address" rows="4" cols="50"
ng-model="address"></textarea>
</td>
</tr>
<tr>
<td><label for="country">Country*</label></td>
<td><select id="country" name="country" required ng-
model="country">

<option value="none">Please Select ...</option>

<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="UK">UK</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Spain">Spain</option>
<option value="India">India</option>
</select>
</td>
</tr>
<tr>
<td>

<label for="zipcode">Zipcode*</label>
</td>
<td>

<input type="text" name="zipcode" id="zipcode" ng-

model="zipcode" ng-pattern="/^\d{6}$/">
</td>
</tr>
<tr>
<td>

<label for="phone">Phone Number*</label>

</td>
<td>

<input type="tel" name="phone" id="phone" ng-model="phone"

ng-pattern="/^[0-9]{10}$/" required>
<div ng-show="formName.phone.$error.required &&
formName.phone.$touched">Please enter a phone number.</div>
<div ng-show="formName.phone.$error.pattern &&
formName.phone.$touched">Phone number should be 10 digits long.</div>

</td>
</tr>

<label for="email">Email*</label>
</td>
<td>

<input type="email" name="email" id="email" ng-

model="email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required>
<div ng-show="myForm.email.$error.pattern">Please enter a
valid email address.</div>
</td>

</tr>

<label for="password">Password*</label>
</td>
<td>

<input type="password" name="password" id="password" ng-

model="password" ng-minlength="6" ng-maxlength="8" required>
<div ng-show="myForm.password.$dirty &&
myForm.password.$error.required">Password is required.</div>
<div ng-show="myForm.password.$error.minlength"
class="red">Password should be at least 6 characters long.</div>
<div ng-show="myForm.password.$error.maxlength"
class="red">Password should be at most 8 characters long.</div>

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

<label for="verifyPassword">Verify Password*</label>

</td>
<td>

<input type="password" name="verifyPassword"

id="verifyPassword" ng-model="verifyPassword" ng-minlength="6" ng-
maxlength="8" ng-pattern="password" required>

<div ng-show="myForm.verifyPassword.$error.required"
class="red">Verify Password is required.</div>
<div ng-show="myForm.verifyPassword.$error.minlength"
class="red">Verify Password should be at least 6 characters long.</div>
<div ng-show="myForm.verifyPassword.$error.maxlength"
class="red">Verify Password should be at most 8 characters long.</div>
<div ng-show="myForm.verifyPassword.$error.pattern"
class="red">Passwords do not match.</div>
</td>

</tr>

</table>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
// $scope.user = 'John Doe';
// $scope.email = '[email protected]';
});
</script>
</body>

</html>

OUTPUT:
1—
HTML:
<!DOCTYPE html>

<html>

<head>

<title>BMI Calculator</title>

</head>

<body>

<h1>BMI Calculator</h1>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>

<label for="weight">Weight (kg):</label>

<input type="number" id="weight" name="weight" required>

<label for="height">Height (cm):</label>

<input type="number" id="height" name="height" required>

<button type="submit">Calculate BMI</button>

</form>

</body>

</html>

JAVASCRIPT::
document.getElementById('bmi-form').addEventListener('submit', function(event) {

event.preventDefault(); // Prevent the form from submitting normally

// Get the form values

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const dob = document.getElementById('dob').value;

const weight = parseFloat(document.getElementById('weight').value);

const height = parseFloat(document.getElementById('height').value);

// Validate the input

if (!validateName(name)) {

alert('Name must be 10-20 alphabetic characters');

return;

if (!validateEmail(email)) {

alert('Invalid email address');

return;

if (!validateDate(dob)) {

alert('Invalid date of birth');

return;

if (isNaN(weight) || weight <= 0) {

alert('Invalid weight');

return;

if (isNaN(height) || height <= 0) {

alert('Invalid height');

return;

// Calculate the BMI

const heightInMeters = height / 100;

const bmi = weight / (heightInMeters * heightInMeters);

// Calculate the age

const today = new Date();

const birthDate = new Date(dob);

const age = today.getFullYear() - birthDate.getFullYear();

const monthDiff = today.getMonth() - birthDate.getMonth();

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {

age--;

// Display the output

const output = `

Name: ${name.toUpperCase()}

Age: ${age}

Weight: ${weight} kg

Height: ${height} cm (${heightInMeters.toFixed(2)} m)

BMI: ${bmi.toFixed(2)}

document.getElementById('output').textContent = output;

});

function validateName(name) {

const nameRegex = /^[a-zA-Z]{10,20}$/;

return nameRegex.test(name);

function validateEmail(email) {

const emailRegex = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;

return emailRegex.test(email);
}

function validateDate(dateString) {

const date = new Date(dateString);

return !isNaN(date.getTime());

2—
HTML:
<!DOCTYPE html>

<html>

<head>

<title>Fixed Deposit Calculator</title>

<style>

form {

width: 400px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

input {

display: block;

width: 100%;

margin-bottom: 10px;

padding: 5px;

border: 1px solid #ccc;

border-radius: 3px;

}
button {

display: block;

width: 100%;

padding: 10px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 3px;

cursor: pointer;

#output {

color: red;

background-color: yellow;

font-size: 20px;

text-align: center;

padding: 10px;

</style>

</head>

<body>

<h1>Fixed Deposit Calculator</h1>

<input type="text" id="name" name="name" required>

<label for="amount">Deposit Amount:</label>

<input type="number" id="amount" name="amount" required>

<label for="days">Number of Days:</label>

<input type="number" id="days" name="days" required>

<button type="submit">Calculate</button>

</form>

</body>

</html>

JAVASCRIPT:

document.getElementById('fd-form').addEventListener('submit', function(event) {

event.preventDefault(); // Prevent the form from submitting normally

// Get the form values

const name = document.getElementById('name').value;

const amount = parseFloat(document.getElementById('amount').value);

const days = parseInt(document.getElementById('days').value);

// Validate the input

if (!validateName(name)) {

alert('Name must be at most 25 alphanumeric characters');

return;

if (isNaN(amount) || amount <= 0) {

alert('Invalid deposit amount');

return;

if (isNaN(days) || days <= 0) {

alert('Invalid number of days');

return;

// Calculate the interest and maturity amount

const interestRate = getInterestRate(days);

const interest = (amount * interestRate * days) / (365 * 100);

const maturityAmount = amount + interest;

// Display the output

const output = `

Name: ${name.toUpperCase()}

Deposit Amount: ${amount.toFixed(2)}

Number of Days: ${days}

Interest Amount: ${interest.toFixed(2)}

Maturity Amount: ${maturityAmount.toFixed(2)}

document.getElementById('output').textContent = output;

});

function validateName(name) {

const nameRegex = /^[a-zA-Z0-9]{1,25}$/;

return nameRegex.test(name);

function getInterestRate(days) {

if (days >= 181 && days <= 269) {

return 5.75;

} else if (days >= 270 && days <= 364) {

return 5.85;

} else if (days === 365) {

return 6.30;

} else if (days >= 366 && days <= 1364) {

return 6.70;

} else if (days >= 730 && days <= 1464) {

return 7.25;

} else {

return 0;
}

3—
HTML:
<!DOCTYPE html>

<html>

<head>

<title>Registration Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Registration Form</h1>

<input type="text" id="name" name="name" required>

</div>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</div>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

</div>

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" required>

</div>
<div class="form-group">

<label for="gender">Gender:</label>

<input type=”radio" name="gender" value=”Male”> Male

<input type=”radio” name=”gender” value="Female”> Female

<input type="radio” name=”gender” value=”Other”> Other

</div>

<label for="language">Language:</label>

<select id="language" name="language" required>

<option value="">Select language</option>

<option value="english">English</option>

<option value="french">French</option>

<option value="spanish">Spanish</option>

</select>

</div>

<label for="zipcode">Zip Code:</label>

<input type="text" id="zipcode" name="zipcode" required>

</div>

<label for="about">About:</label>

<textarea id="about" name="about" required></textarea>

</div>

<button type="submit">Register</button>

</form>

<table id="output-table" style="display: none;">

<tr>

<th>Email</th>

<th>Phone</th>

<th>Gender</th>
<th>Language</th>

<th>About</th>

</tr>

</table>

</body>

</html>

JAVASCRIPT:
$(document).ready(function() {

$('#registration-form').submit(function(event) {

event.preventDefault();

// Get form data

var name = $('#name').val();

var email = $('#email').val();

var phone = $('#phone').val();

var gender = $('#gender').val();

var language = $('#language').val();

var zipcode = $('#zipcode').val();

var about = $('#about').val();

// Validate form data

if (!validateName(name)) {

alert('Name must be 10-20 alphanumeric characters');

return;

if (!validateEmail(email)) {
alert('Invalid email format');

return;

if (!validatePhone(phone)) {

alert('Phone number must be 10 digits');

return;

if (!validateZipcode(zipcode)) {

alert('Zip code must be 6 digits');

return;

if (!gender) {

alert('Please select a gender');

return;

// Display form data in table

$('#output-row').html(`

<td>${email}</td>

<td>${phone}</td>

<td>${gender}</td>

<td>${language}</td>

<td>${zipcode}</td>

<td>${about}</td>

`);

$('#output-table').show();

});

function validateName(name) {

var nameRegex = /^[a-zA-Z0-9]{10,20}$/;

return nameRegex.test(name);

function validateEmail(email) {

var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

return emailRegex.test(email);

function validatePhone(phone) {

var phoneRegex = /^\d{10}$/;

return phoneRegex.test(phone);

function validateZipcode(zipcode) {

var zipcodeRegex = /^\d{6}$/;

return zipcodeRegex.test(zipcode);

});

4—
HTML:
<!DOCTYPE html>

<html>

<head>

<title>Food Request Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container my-5">

<h1 class="text-center mb-4">Food Request Form</h1>

<form>

<input type="text" class="form-control" id="name" name="name" required>

</div>

<label for="email">Email:</label>

<input type="email" class="form-control" id="email" name="email" required>

</div>

<label for="phone">Phone:</label>

<input type="tel" class="form-control" id="phone" name="phone" required>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

<div class="row mt-5">

<div class="col-md-3 mb-4">

<img src="quattro-formaggi.jpg" class="card-img-top" alt="Quattro Formaggi">

<h5 class="card-title menu-item-title">Quattro Formaggi</h5>

</div>

<div class="col-md-3 mb-4">

<img src="italian-tuna.jpg" class="card-img-top" alt="Italian Tuna">

<h5 class="card-title menu-item-title">Italian Tuna</h5>

</div>

<div class="col-md-3 mb-4">

<img src="veggienana.jpg" class="card-img-top" alt="Veggienana">

<h5 class="card-title menu-item-title">Veggienana</h5>

</div>

<div class="col-md-3 mb-4">

<img src="capricciosa.jpg" class="card-img-top" alt="Capricciosa">

<h5 class="card-title menu-item-title">Capricciosa</h5>

</div>

</div>
</body>

</html>

CSS:
.menu-item-title {

color: red;

background-color: yellow;

padding: 5px;

.card {

height: 100%;

.card-img-top {

height: 200px;

object-fit: cover;

}
5—
HTML:
<!DOCTYPE html>

<html>

<head>

<title>Login Form</title>

</head>

<body>

<h1>Login Form</h1>

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<br>

<button type="submit">Enter</button>

</form>

<h1 id="output" style="font-size: 20px; color: magenta; background-color: lime;"></h1>

</body>

</html>

JAVASCRIPT:
// Create an associative array named as login which is populated with username as key and
password as value

const login = {

"user1234": "pass1234",

"user5678": "pass5678",

"user9012": "pass9012"
};

// Function to validate the username and password

function validateCredentials(username, password) {

// Check if the username and password are at least 10 characters long

if (username.length !== 10 || password.length !== 10) {

return "The username and password should be 10 characters long.";

// Check if the username is in the login array

if (!(username in login)) {

return "The person is not a valid user of the system";

// Check if the password is correct

if (login[username] !== password) {

return "The password is invalid";

return "Now you login";

// Add an event listener to the login form

document.getElementById("login-form").addEventListener("submit", function(event) {

event.preventDefault(); // Prevent the form from submitting normally

// Get the username and password from the form

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

// Validate the credentials and display the output

const output = validateCredentials(username, password);

document.getElementById("output").textContent = output;

});

O Level Project HTML Programe PDF
70% (10)
O Level Project HTML Programe PDF
32 pages
Lattices
No ratings yet
Lattices
16 pages
Web Tech Cyclesheet
No ratings yet
Web Tech Cyclesheet
29 pages
Web Tech: Assignment
No ratings yet
Web Tech: Assignment
68 pages
Venom
No ratings yet
Venom
68 pages
20BIT0426 Webtech DA
No ratings yet
20BIT0426 Webtech DA
107 pages
Web Technologies Assessment 1
No ratings yet
Web Technologies Assessment 1
24 pages
1) Introduction To HTML A. Create A Webpage That Prints Your Name To The Screen
No ratings yet
1) Introduction To HTML A. Create A Webpage That Prints Your Name To The Screen
73 pages
HTML Assignment
100% (1)
HTML Assignment
14 pages
Cyclesheet 1
No ratings yet
Cyclesheet 1
49 pages
Cycle Sheet-1 PDF
No ratings yet
Cycle Sheet-1 PDF
5 pages
HTML Basics Practicals
No ratings yet
HTML Basics Practicals
18 pages
23mis0344 VL2024250102971 Ast01
No ratings yet
23mis0344 VL2024250102971 Ast01
75 pages
FALLSEM2019-20 ITE1002 ELA VL2019201002530 Reference Material I 16-Jul-2019 Ass-1 HTML and CSS Exercises Sheet Final
No ratings yet
FALLSEM2019-20 ITE1002 ELA VL2019201002530 Reference Material I 16-Jul-2019 Ass-1 HTML and CSS Exercises Sheet Final
5 pages
19MCA0210
No ratings yet
19MCA0210
62 pages
Ipwt Da 1
No ratings yet
Ipwt Da 1
5 pages
Assesment 1 Question
No ratings yet
Assesment 1 Question
6 pages
HTML Practical Assignment-1
No ratings yet
HTML Practical Assignment-1
48 pages
EXPIREMENT HTML
No ratings yet
EXPIREMENT HTML
19 pages
COMPUTER APPLICATION 10th New File
No ratings yet
COMPUTER APPLICATION 10th New File
58 pages
HTML
No ratings yet
HTML
49 pages
FullStack Lab
No ratings yet
FullStack Lab
44 pages
Web Technologies Practical
No ratings yet
Web Technologies Practical
20 pages
Internet Technology Lab Experiments Bca
No ratings yet
Internet Technology Lab Experiments Bca
20 pages
Full Stack Development
No ratings yet
Full Stack Development
27 pages
Weekend Assignments Web Tech 24 Oct
No ratings yet
Weekend Assignments Web Tech 24 Oct
3 pages
BAprogIII 4may 1P
No ratings yet
BAprogIII 4may 1P
4 pages
EXPIREMENT HTML
No ratings yet
EXPIREMENT HTML
19 pages
Cycle Sheet-1
No ratings yet
Cycle Sheet-1
36 pages
Class 10 IT 402 Notes As Per 2024-25 Syllabus
0% (3)
Class 10 IT 402 Notes As Per 2024-25 Syllabus
30 pages
Practicals of Sem 4 Q.1 To 50
No ratings yet
Practicals of Sem 4 Q.1 To 50
73 pages
ICT Grade 11 Introduction To HTML
100% (2)
ICT Grade 11 Introduction To HTML
33 pages
SOC 2 (Lab Manual)
No ratings yet
SOC 2 (Lab Manual)
58 pages
E Commerce Record
No ratings yet
E Commerce Record
51 pages
23mis0249 VL2024250102988 Ast01
No ratings yet
23mis0249 VL2024250102988 Ast01
61 pages
10 Ca Lab Work
No ratings yet
10 Ca Lab Work
28 pages
HTML Exercise - 1
No ratings yet
HTML Exercise - 1
1 page
Web Tech File Code Only
No ratings yet
Web Tech File Code Only
94 pages
Web-Programs (1 To 10)
No ratings yet
Web-Programs (1 To 10)
13 pages
Vaibhav Web Tech-1
No ratings yet
Vaibhav Web Tech-1
30 pages
HTML Java Script Program
No ratings yet
HTML Java Script Program
12 pages
HTML Head Title Title Head Body h2 h2 A Img A BR A A BR A A BR A Input A BR Body HTML
No ratings yet
HTML Head Title Title Head Body h2 h2 A Img A BR A A BR A A BR A Input A BR Body HTML
20 pages
Chapter: 9.10 HTML Exercises Topic: 9.10.1 HTML Exercises: E-Content of Internet Technology and Web Design
No ratings yet
Chapter: 9.10 HTML Exercises Topic: 9.10.1 HTML Exercises: E-Content of Internet Technology and Web Design
1 page
HTML LAB File
No ratings yet
HTML LAB File
34 pages
Epcet 21csl481
No ratings yet
Epcet 21csl481
22 pages
Webdesigning Labfile
No ratings yet
Webdesigning Labfile
44 pages
Webd Lab File
No ratings yet
Webd Lab File
25 pages
IWP Assignment-1 2024-25 (Odd)
No ratings yet
IWP Assignment-1 2024-25 (Odd)
7 pages
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
Web Programming Lab Manual
0% (2)
Web Programming Lab Manual
73 pages
23SEC201 - Web Programming - Practical
No ratings yet
23SEC201 - Web Programming - Practical
61 pages
Rit WT Lab Manual
No ratings yet
Rit WT Lab Manual
40 pages
CS606 SD
No ratings yet
CS606 SD
30 pages
Yash Computer Project
No ratings yet
Yash Computer Project
43 pages
Practical File of Web Develment
No ratings yet
Practical File of Web Develment
29 pages
WT Lab Manual
No ratings yet
WT Lab Manual
56 pages
Lab Exercise 2
No ratings yet
Lab Exercise 2
3 pages
Web Development Step by Step - HTML
From Everand
Web Development Step by Step - HTML
Enrique Vicente
No ratings yet
Web Development Step by Step
From Everand
Web Development Step by Step
Enrique Vicente
No ratings yet
Learn Html In 1 Hour
From Everand
Learn Html In 1 Hour
John Bura
No ratings yet
Learn Css In 1 Hour
From Everand
Learn Css In 1 Hour
John Bura
No ratings yet
Chap 7 Paristo Berlin
100% (1)
Chap 7 Paristo Berlin
7 pages
Roberts Encyclopedia of Comparative Iconography Themes Depicted in Works of Art
100% (12)
Roberts Encyclopedia of Comparative Iconography Themes Depicted in Works of Art
1,072 pages
Configure LUNs For ASM Disks Using WWID ASMLIB Linux5
No ratings yet
Configure LUNs For ASM Disks Using WWID ASMLIB Linux5
17 pages
Courage - The Quiet Strength That Changes Everything
No ratings yet
Courage - The Quiet Strength That Changes Everything
3 pages
Chapter 7
No ratings yet
Chapter 7
10 pages
Michael Löwy Consumed by Night's Fire - The Dark Romanticism of Guy Debord (1998)
No ratings yet
Michael Löwy Consumed by Night's Fire - The Dark Romanticism of Guy Debord (1998)
10 pages
BSNL Bill
No ratings yet
BSNL Bill
4 pages
Concept Paper
No ratings yet
Concept Paper
17 pages
Stopping by Woods On A Snowy Evening by Robert Frost
No ratings yet
Stopping by Woods On A Snowy Evening by Robert Frost
7 pages
Stores/Fur/Icf Tender Document
No ratings yet
Stores/Fur/Icf Tender Document
11 pages
Matrices - DPP 02 (Of Lec 03)
No ratings yet
Matrices - DPP 02 (Of Lec 03)
3 pages
Bootstrap Syllabus
No ratings yet
Bootstrap Syllabus
2 pages
DL 8
No ratings yet
DL 8
7 pages
English Language & Literature Code No. 184 Class IX (2021-22) Term Wise Syllabus Term - I
No ratings yet
English Language & Literature Code No. 184 Class IX (2021-22) Term Wise Syllabus Term - I
3 pages
Digital Illustration
No ratings yet
Digital Illustration
5 pages
110-6044-R20 DriveFW UPD
No ratings yet
110-6044-R20 DriveFW UPD
11 pages
MP Lab Manual
No ratings yet
MP Lab Manual
88 pages
DSA Lab Experiments - 12 & 13
No ratings yet
DSA Lab Experiments - 12 & 13
5 pages
(EDITED) HANDOUT - Integrated English Skill - TEFL 2 NIGHT CLASS
No ratings yet
(EDITED) HANDOUT - Integrated English Skill - TEFL 2 NIGHT CLASS
8 pages
Lesson Plan: Textbook
No ratings yet
Lesson Plan: Textbook
5 pages
Ebook8207 195686
No ratings yet
Ebook8207 195686
64 pages
Ecnote K42685645
No ratings yet
Ecnote K42685645
1 page
CSE I SEM Min
No ratings yet
CSE I SEM Min
110 pages
Topic 3 READING AND THINKING STRATEGIES ACROSS TEXT TYPES
No ratings yet
Topic 3 READING AND THINKING STRATEGIES ACROSS TEXT TYPES
31 pages
Experiment 2: Analysis and Synthesis of Boolean Expressions Using Basic Logic Gates
No ratings yet
Experiment 2: Analysis and Synthesis of Boolean Expressions Using Basic Logic Gates
10 pages
Cadence Case Study
No ratings yet
Cadence Case Study
2 pages
Guideline For Thesis and Desertation Works @CLG - Approved
No ratings yet
Guideline For Thesis and Desertation Works @CLG - Approved
125 pages
Modal Verbs
No ratings yet
Modal Verbs
3 pages
Thesis 123
100% (3)
Thesis 123
6 pages

Ilovepdf Merged

Uploaded by

Ilovepdf Merged

Uploaded by

BITE304P – Web Technologies

a. Print your name in green

b. Print the numbers 1 - 10, each number being a differentcolor.

c. Prints your name in a Tahoma font.

d. Display a part of a word with bold underline.

e. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font

i. Print a 2+b2=2ab j. Print H2O k. Display a c code as it is in the page

o. Apply marquee for your name

p. Display a paragraph contents in a single line

6) HTML Forms Design the following Form

7) HTML Frames. Design the following using frames.

Index file code

There is 3px of blank space to the right of each.

• The score information should be 50% wide.

14) Develop the following output by using bootstrap grids

a) The first division displays a digital clock on the rightmost end.

<div class="image_slider" id="image">

<div class="color_picker" id="color">

colorPicker.addEventListener("input", (event) => {

const sentenceReverse = () => {

for (let i = 0; i < wordsArray.length; i++) {

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

// var last = $(`#${y}`);

$scope.foodname = $scope.foodname ? $scope.foodname.toLowerCase()

<div ng-show="myForm.dob.$dirty && myForm.dob.$invalid">

<option value="none">Please Select ...</option>

<input type="text" name="zipcode" id="zipcode" ng-

<label for="phone">Phone Number*</label>

<input type="tel" name="phone" id="phone" ng-model="phone"

<input type="email" name="email" id="email" ng-

<input type="password" name="password" id="password" ng-

<label for="verifyPassword">Verify Password*</label>

<input type="password" name="verifyPassword"

<input type="text" id="name" name="name" required>

<input type="email" id="email" name="email" required>

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>

<label for="weight">Weight (kg):</label>

<input type="number" id="weight" name="weight" required>

<label for="height">Height (cm):</label>

<input type="number" id="height" name="height" required>

<button type="submit">Calculate BMI</button>

event.preventDefault(); // Prevent the form from submitting normally

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const dob = document.getElementById('dob').value;

const weight = parseFloat(document.getElementById('weight').value);

const height = parseFloat(document.getElementById('height').value);

// Validate the input

alert('Name must be 10-20 alphabetic characters');

alert('Invalid email address');

alert('Invalid date of birth');

if (isNaN(weight) || weight <= 0) {

if (isNaN(height) || height <= 0) {

// Calculate the BMI

const bmi = weight / (heightInMeters * heightInMeters);

// Calculate the age

const today = new Date();

const birthDate = new Date(dob);

const age = today.getFullYear() - birthDate.getFullYear();

const monthDiff = today.getMonth() - birthDate.getMonth();

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {

// Display the output

Height: ${height} cm (${heightInMeters.toFixed(2)} m)

const nameRegex = /^[a-zA-Z]{10,20}$/;

const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

const date = new Date(dateString);

<title>Fixed Deposit Calculator</title>

border: 1px solid #ccc;

border: 1px solid #ccc;

<h1>Fixed Deposit Calculator</h1>

<input type="text" id="name" name="name" required>

<label for="amount">Deposit Amount:</label>

<input type="number" id="amount" name="amount" required>

<label for="days">Number of Days:</label>

<input type="number" id="days" name="days" required>

const emailRegex = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;