Scribd
Upload
43 views89 pages

Name: Ketan Gupta Section: G Class Roll No: 30 University Roll No: 2019292

The document discusses creating HTML pages to demonstrate various tags. It includes code to display basic tags, lists, tables, and forms. Code examples are provided to showcase tags like headings, paragraphs, lists, tables, and form elements.

Uploaded by

Akanksha Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views89 pages

Name: Ketan Gupta Section: G Class Roll No: 30 University Roll No: 2019292

The document discusses creating HTML pages to demonstrate various tags. It includes code to display basic tags, lists, tables, and forms. Code examples are provided to showcase tags like headings, paragraphs, lists, tables, and form elements.

Uploaded by

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

NAME : KETAN GUPTA

SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Exp No: 1 : Basic Html Tags


Aim:
To create a simple html file to demonstrate the use of different tags.
I. Problem Statement :-
Create an html page named as “: Basic_Html_Tags.html” Add the following
tags detail.
1. Set the title of the page as “Basic Html Tags”
2. Within the body perform the following
a) Moving text = “Basic HTML Tags”
b) Different heading tags ( h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style e ( <b>, <u>, <sub>, <sup>....)
i) Different Physical style ( <code>, <del>, <kbd>...)
j) Listing tags ( 2 types with, & each type provide different “type” attribute)

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Tags</title>
</head>
<body>
<marquee>Basic HTML Tags</marquee>
<h1>HTML</h1>
<h2>HTML</h2>
<h3>HTML</h3>
<h4>HTML</h4>
<h5>HTML</h5>
<h6>HTML</h6>
<hr>
<p>HTML stands for HyperText Markup Language.It is used to design web
pages using a markup language.<br>The language uses tags to define what
manipulation has to be done on the text.</p>
</hr>
<pre>TAGS IN HTML: Paragraph tag
Marquee tag
</pre>
<br>
<p><blockquote>Different Logical Style:</blockquote></p>
<p><b>Bold</b></p>
<p><u>Underline</u></p>
<p><del>HTML is tough</del></p>
</body>
</html>
OUTPUT:
II. Problem Statement :-
Write the HTML code for the following:
PCl3+Cl2=PCl5

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscript</title>
</head>
<body>
<p>PCl<sub>3</sub>+Cl<sub>2</sub>=PCl<sub>5</sub>
</body>
</html>
OUTPUT:
III. Problem Statement :-
Write the HTML code to display your family information:
Your Name:
Your Age:
Father’s Name:
Mother’s Name:
Father’s Age:
Mother’s Age:
 use headings
 use <pre> tag

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Family Information</title>
</head>
<body>
<h1>MY FAMILY INFORMATION</h1>
<pre>NAME: KETAN GUPTA
AGE: 21
FATHER'S NAME: AJAY GUPTA
MOTHER'S NAME: RAJNI GUPTA
FATHER'S AGE: 50
MOTHER'S AGE: 48
</pre>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Exp No: 2 : Html Tags (List, Table)


I)Aim:
To create a simple html file to demonstrate the use of different tags.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List</title>
</head>
<body>
<p><b>Here is a nested Ordered List:</b></p>
<ol type="I">
<li>Module 1</li>
<li>Module 2</li>
<ol type="i">
<li>Module 2.1</li>
<li>Module 2.2</li>
</ol>
<li>Module 3</li>
</ol>
<p><b>Disc Bullets List:</b></p>
<ul>
<li>Keyboard</li>
<li>Mouse</li>
<li>Monitors</li>
</ul>
<p><b>Circle Bullets List:</b></p>
<ul style="list-style-type: circle;">
<li>CRT</li>
<li>LCD</li>
<li>LED</li>
</ul>
<p><b>Square Bullets List:</b></p>
<ul style="list-style-type: square;">
<li>Windows</li>
<li>Linux</li>
<li>Android</li>
</ul>
<p><b>A Definition List:</b></p>
<dl><dh>Coffee</dh>
<dd>Black Coffee or Milk Coffee</dd>
<dh>Milk</dh>
<dd>Hot White Milk or Cold Chocolate Milk</dd>
</dl>
</body>
</html>
OUTPUT:
II)Aim:
To create a simple html file to demonstrate the use of different tags of Table.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time-Table</title>
</head>
<body>
<p align="center"><b>GRAPHIC ERA DEEMED TO BE
UNIVERSITY<br>TIME TABLE OF B.TECH VIth SEMESTER-
COMPUTER SCIENCE & ENGG.-G<br>ACADEMIC YEAR
2023-24</b></p>
<p align="left"><b>Room No.:-Lt-7</b></p>
<table border=”1”>
<tr>
<th></th>
<th>8:05-9:00</th>
<th>8:55-9:50</th>
<th>08:08-11:05</th>
<th>11:05-12:00</th>
<th>12:00-12:55</th>
<th>1:00-1:55</th>
<th>1:55-2:50</th>
<th>3:08-4:00</th>
<th>4:00-4:55</th>
<th>4:55-5:50</th>
</tr>
<tr>
<th>Mon</th>
<td align="center"><mark>TCS-604<br>CR-2</td>
<td align="center"><mark>TCS-604<br>CR-2</td>
<td align="center"><mark>TCS-693<br>Lt-7</td>
<td colspan="2" align="center">Placement Preparation
Classes<br>Lt-7</td>
<td align="center">LUNCH</td>
<td colspan="2" align="center">Web Development
Lab(<b>G1</b>)<br><b>New Lab-1</b><br>Compilor Design
Lab(<b>G2</b>)<br><b>New Lab-2</b></td>
<td align="center"><mark>TCS-601<br>Lt-5</td>
<td align="center"><mark>TCS-601<br>Lt-5</td>
</tr>
<tr>
<th>Tue</th>
<td colspan="2" align="center">TCS-611<br>(Online)</td>
<td colspan="2" align="center">SWAYAM/Training/Extra-Curricular
Activities/LIB</td>
<td align="center">LUNCH</td>
<td align="center"><mark>TCS-693<br>Lt-7</td>
<td colspan="2" align="center">Software Engineering
Lab<br><b>Digital Lab-1</b></td>
<td align="center">Elective</td>
<td align="center">Elective</td>
</tr>
<tr>
<th>Wed</th>
<td colspan="2" align="center">Competitive Programming<br>(TOC-
601)-Audit Course<br>(Online)</td>
<td align="center">LIB</td>
<td colspan="2" align="center">Placement Preparation
Classes<br>Lt-7</td>
<td align="center">LUNCH</td>
<td colspan="2" align="center">Software Engineering
Lab<br><b>Digital Lab-1</b></td>
<td align="center">Elective</td>
<td align="center">Elective</td>
</tr>
<tr>
<th>Thu</th>
<td colspan="2" align="center">TCS-611<br>(Online)</td>
<td align="center"><mark>TCS-693<br>Lt-7</td>
<td align="center"><mark>XCS-601<br>(QAR)Lt-7</td>
<td align="center"><mark>TCS-601<br>Lt-5</td>
<td align="center">LUNCH</td>
<td align="center"><mark>TCS-604<br>Lt-9</td>
<td align="center"><mark>TCS-604<br>Lt-9</td>
<td colspan="2" align="center">SWAYAM/Training/Extra-Curricular
Activities/LIB</td>
</tr>
<tr>
<th>Fri</th>
<td align="center"><mark>TCS-601<br>Lt-7</td>
<td align="center"><mark>TCS-693<br>Lt-7</td>
<td align="center"><mark>XCS-601(Verbal)<br>Lt-7</td>
<td align="center"><mark>XCS-601<br>(Soft Skills)<br>Lt-7</td>
<td align="center">TCS-611<br>(Discussion)<br>Lt-7</td>
<td align="center">LUNCH</td>
<td colspan="2" align="center">Web Development
Lab(<b>G2</b>)<br><b>New Lab-1</b><br>Compilor Design
Lab(<b>G1</b>)<br><b>New Lab-2</b></td>
<td colspan="2" align="center">SWAYAM/Training/Extra-Curricular
Activities/LIB</td>
</tr>
</table>
</body>
</html>
OUTPUT:

NAME : KETAN GUPTA


SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Exp No: 3 : Html Tags (Form)


Aim:
To create a simple html file to demonstrate the use of different tags.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
<style>
*{
background-color:aquamarine;
}
</style>
</head>
<body>
<form action="">
<h1 style="text-align: center; color: blue;">Entry Form</h1>
<label for="name" style="font-size: x-large; color: blue; font-weight:
bold;">Enter Your Name : </label>
<input type="text" name="name" id="name" style="background-color:
aliceblue;">
<br><br>
<label for="age" style="font-size: x-large; color: blue; font-weight:
bold;">Enter Your Age : </label>
<input type="text" name="age" id="age" style="background-color:
aliceblue;" maxlength="2" size="4"><br><br>
<label for="name" style="font-size: x-large; color: blue; font-weight:
bold; vertical-align: top;">Enter Your Address : </label>
<textarea name="address" id="address" cols="15" rows="5"
style="background-color: aliceblue;"></textarea><br><br>
<label for="name" style="font-size: x-large; color: blue; font-weight:
bold;">Sex :</label>
<p><input type="radio" name="Gender" id="female">Female
<br>
<input type="radio" name="Gender" id="male">Male
</p>
<label for="name" style="font-size: x-large; color: blue; font-weight:
bold;">Nationality :</label>
<select name="country" id="country" style="background-color:
aliceblue;">
<option value="">(Please select a country)</option>
<option value="India">India</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>
<br><br>
<label for="name" style="font-size: x-large; color: blue; font-weight:
bold;">Languages Known :</label> <br>
<label for="name" style="font-size: medium; color: blue; font-weight:
bold;"><input type="checkbox" name="c" id="c">C<br>
<input type="checkbox" name="c" id="c">C++<br>
<input type="checkbox" name="c" id="c">VB<br>
<input type="checkbox" name="c" id="c">JAVA<br>
<input type="checkbox" name="c" id="c">OTHERS<br>
</label><br><br>
<label for="name" style="font-size: x-large; color: blue; font-weight:
bold;">Enter Your password : </label>
<input type="password" name="" id="" style="background-color:
aliceblue;"><br><br>
<input type="reset" value="Reset" style="background-color: gray;">
<input type="submit" value="Submit" style="background-color: grey;">
</form>
</body>
</html>

OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Exp No: 4 : Frames & iFrames


Aim:
To create an html page with different types of frames such as floating frame,
navigation frame & mixed frame.
Problem Statement :
I. Create an html page named as “frames.html”. Divide the page into two
columns of 20%, 80% size. In 20% size call the hyperlinks for
“navigationframes.html”, “floatingframes.html”, “mixedframe.html”,
“noframe” and make the page to be get displayed on the other column when
these links are clicked.

CODE :
fr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Representation</title>
</head>
<frameset cols="20%,80%"><frame name="hello"
src="links.html"></frame><frame name="Output"></frame></frameset>
<body>
</body>
</html>

links.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Frame</title>
</head>
<body>
<a href="navigation.html" target="Output">navigationframe.html</a>
<br>
<a href="floating.html" target="Output">floatingframe.html</a>
<br>
<a href="mixedframe.html" target="Output">mixedframe.html</a>
<br>
<a href="noframe.html" target="Output">noframeframe.html</a>
<br>
</body>
</html>

navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
</head>
<body>
Hello!
</body>
</html>
floating.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Page</title>
</head>
<body>
How are you?
</body>
</html>

mixedframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mixed Page</title>
</head>
<body>
I am Happy.
</body>
</html>

noframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Frame Page</title>
</head>
<body>
What's going on?
</body>
</html>

OUTPUT:
Problem Statement :
II.Create an html page named as “navigationframe.html”. Divide the page into
two columns of 40%, 60% size. In 40% size call the hyperlink file created in
above exercise , and make the page to be get displayed on the other column
when the link is clicked.

CODE :
nvg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Page</title>
</head>
<frameset cols="40%,60%"><frame name="hello"
src="links.html"></frame><frame name="Output"></frame></freameset>
<body>
</body>
</html>
OUTPUT:
Problem Statement :
III. Create an html page named as “floatingframes.html”. In this file include a
paragraph to explain floating frame, and in floating frame include the any html
file created in the above exercise as inline.

CODE :
fp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Page</title>
</head>
<body>
<p>Floating Frame is described in inline frame.</p>
<a href="links.html">Links</a>
</body>
</html>
OUTPUT:
Problem Statement :
IV. Create an html page named as “mixedframe.html” . Divide the page into
two columns of 25% & 75% size. In 25% display an image and divide the
75% into two rows. (50% & 50%). In the first 50% display the video file
created in previous exercise and other 50% the time table created in previous
exercise.

CODE :
mf.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mixed Frame</title>
</head>
<frameset cols="25%,75%"><frame name="Image" src="air quality
image.jpg"></frame><frameset rows="50%,50%"><frame name1="Video"
src="akki.mp4"></frame><frame name2="Timetable"
src="TimeTable.html"></frame></frameset></frameset>
<body>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Exp No: 5 : Map


Aim:
To create an html page with different types of image map such as circle, rect ,
poly & mixed map.
Problem Statement :
I. To display an image on the website and construct a map for all circle
buttons, develop the "dialler.html" HTML page. When you click on a circle, a
message with a button number, such as "you push button 1," will appear.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialler</title>
<style>
h1{
color:red;
}
.button {
width: 080px;
height: 080px;
border-radius: 50%;
background-color: pink;
color: red;
font-size: 20px;
text-align: center;
line-height: 080px;
cursor: pointer;
margin: 08px;
display: inline-block;
transition: background-color 0.3s;
}
.button:hover {
background-color:red;
}
.button:active {
background-color: pink;
}
.message {
display: none;
}
.message:target {
display: block;
color: red;
font-weight: bold;
}
h1{
text-align: center;
}
div{
text-align: center;
}

</style>
</head>
<body>
<h1><u>DIALER</u></h1>
<div>
<a href="#message1" class="button">1</a>
<a href="#message2" class="button">2</a>
<a href="#message3" class="button">3</a>
<br>
<a href="#message4" class="button">4</a>
<a href="#message5" class="button">5</a>
<a href="#message6" class="button">6</a>
<br>
<a href="#message7" class="button">7</a>
<a href="#message8" class="button">8</a>
<a href="#message9" class="button">9</a>
<br>
<a href="#message08" class="button">*</a>
<a href="#message11" class="button">0</a>
<a href="#message12" class="button">#</a>
</div>
<div id="message1" class="message"><h3>You pushed button
1</h3></div>
<div id="message2" class="message"><h3>You pushed button
2</h3></div>
<div id="message3" class="message"><h3>You pushed button
3</h3></div>
<div id="message4" class="message"><h3>You pushed button
4</h3></div>
<div id="message5" class="message"><h3>You pushed button
5</h3></div>
<div id="message6" class="message"><h3>You pushed button
6</h3></div>
<div id="message7" class="message"><h3>You pushed button
7</h3></div>
<div id="message8" class="message"><h3>You pushed button
8</h3></div>
<div id="message9" class="message"><h3>You pushed button
9</h3></div>
<div id="message08" class="message"><h3>You pushed button
*</h3></div>
<div id="message11" class="message"><h3>You pushed button
0</h3></div>
<div id="message12" class="message"><h3>You pushed button
#</h3></div>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Ex No: 9 Input Output In JavaScript


Aim:
I.To create an HTML page to explain input and output using a calculator with
the use of various predefined functions and objects in Javascript.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 080vh;
background-color: #f0f0f0;
}
.calculator {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input, .output {
margin-bottom: 08px;
}

input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
border: none;
cursor: pointer;
border-radius: 4px;
outline: none;
}

input[type="button"]:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="calculator">
<div class="input">
<input type="text" id="display" readonly>
</div>
<div class="output">
<input type="button" value="=" onclick="calculate()">
</div>
<div class="buttons">
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="+" onclick="appendToDisplay('+')">
<br>
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<br>
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<br>
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="." onclick="appendToDisplay('.')">
<input type="button" value="/" onclick="appendToDisplay('/')">
<input type="button" value="C" onclick="clearDisplay()">
</div>
</div>

<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

function calculate() {
try {
var result = eval(document.getElementById('display').value);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
</script>
</body>
</html>
OUTPUT:
Aim:
II.To create an HTML page to explain input and output using a scientific
calculator with the use of various predefined functions and objects in
Javascript.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
*{
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:white;
}
.calculator {
width: 350px;
height: 320px;
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 08px #666;
border: 5px solid black;
border-radius: 08px;
}
#display {
width: 320px;
height: 40px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 18px;
left: 2px;
top: 2px;
color: #7fff00;
}
.btnTop{
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnNum {
color: white;
background-color: black;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnMath {
color: white;
background-color: lightblue;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnOpps {
color: white;
background-color: #ff9933;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
<title>Scientific Calculator</title>
</head>
<body>
<form name="sci-calc">
<table class="calculator" cellspacing="0" cellpadding="1">
<tr>
<td colspan="5"><input id="display" name="display" value="0"
size="28" maxlength="25"></td>
</tr>
<tr>
<td><input type="button" class="btnTop" name="btnTop" value="C"
onclick="this.form.display.value= 0 "></td>
<td><input type="button" class="btnTop" name="btnTop" value="<--"
onclick="deleteChar(this.form.display)"></td>
<td><input type="button" class="btnTop" name="btnTop" value="="
onclick="if(checkNum(this.form.display.value)) { compute(this.form)
}"></td>
<td><input type="button" class="btnOpps" name="btnOpps"
value="&#960;"
onclick="addChar(this.form.display,'3.14159265359')"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="%" onclick=" percent(this.form.display)"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum"
value="7" onclick="addChar(this.form.display, '7')"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="8" onclick="addChar(this.form.display, '8')"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="9" onclick="addChar(this.form.display, '9')"></td>
<td><input type="button" class="btnOpps" name="btnOpps"
value="x&#94;" onclick="if(checkNum(this.form.display.value))
{ exp(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="/" onclick="addChar(this.form.display, '/')"></td>
<tr>
<td><input type="button" class="btnNum" name="btnNum"
value="4" onclick="addChar(this.form.display, '4')"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="5" onclick="addChar(this.form.display, '5')"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="6" onclick="addChar(this.form.display, '6')"></td>
<td><input type="button" class="btnOpps" name="btnOpps"
value="ln" onclick="if(checkNum(this.form.display.value))
{ ln(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="*" onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum"
value="1" onclick="addChar(this.form.display, '1')"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="2" onclick="addChar(this.form.display, '2')"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="3" onclick="addChar(this.form.display, '3')"></td>
<td><input type="button" class="btnOpps" name="btnOpps"
value="&radic;" onclick="if(checkNum(this.form.display.value))
{ sqrt(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="-" onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath"
value="&#177" onclick="changeSign(this.form.display)"></td>
<td><input type="button" class="btnNum" name="btnNum"
value="0" onclick="addChar(this.form.display, '0')"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="&#46;" onclick="addChar(this.form.display, '&#46;')"></td>
<td><input type="button" class="btnOpps" name="btnOpps"
value="x&#50;" onclick="if(checkNum(this.form.display.value))
{ square(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="+" onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath"
value="(" onclick="addChar(this.form.display, '(')"></td>
<td><input type="button" class="btnMath" name="btnMath"
value=")" onclick="addChar(this.form.display,')')"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="cos" onclick="if(checkNum(this.form.display.value))
{ cos(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="sin" onclick="if(checkNum(this.form.display.value))
{ sin(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath"
value="tan" onclick="if(checkNum(this.form.display.value))
{ tan(this.form) }"></td>
</tr>
</tabel>
</form>
<script>
function addChar(input, character) {
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}

function cos(form) {
form.display.value = Math.cos(form.display.value);
}

function sin(form) {
form.display.value = Math.sin(form.display.value);
}

function tan(form) {
form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
form.display.value = Math.log(form.display.value);
}

function exp(form) {
form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
val = input.value;
input.value = input.value + "%";
}

function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}

function compute(form) {
form.display.value = eval(form.display.value);
}

function square(form) {
form.display.value = eval(form.display.value) *
eval(form.display.value)
}

function checkNum(str) {
for (var i = 0; i < str.length; i++) {
var ch = str.charAt(i);
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-"
&& ch != "." && ch != "(" && ch!= ")" && ch != "%") {
alert("invalid entry!")
return false
}
}
}
return true
}
</script>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Ex No: 10 Window Object methods alert() , prompt() ,


confirm(), open(), close() , print(),
Aim:

To create an html page to explain the use of various predefined


functions in window object in java script.
Create an html page named as “window.html” and within the script
tag.
1. Use different window object.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Object Methods</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.box {
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<h1>Window Object Methods</h1>
<div class="container">
<div class="box">
<h2>alert()</h2>
<button onclick="showAlert()">Show Alert</button>
</div>
<div class="box">
<h2>prompt()</h2>
<button onclick="showPrompt()">Show Prompt</button>
</div>
<div class="box">
<h2>confirm()</h2>
<button onclick="showConfirm()">Show Confirm</button>
</div>
<div class="box">
<h2>open()</h2>
<button onclick="openWindow()">Open Window</button>
</div>
<div class="box">
<h2>print()</h2>
<button onclick="printPage()">Print Page</button>
</div>
<div class="box">
<h2>close()</h2>
<button onclick="closeWindow()">Close Window</button>
</div>
</div>

<script>
function showAlert() {
window.alert("This is an alert message!");
}

function showPrompt() {
var userInput = window.prompt("Enter your name:", "John Doe");
if (userInput !== null) {
window.alert("Hello, " + userInput + "!");
}
}

function showConfirm() {
var result = window.confirm("Are you sure you want to proceed?");
if (result) {
window.alert("You clicked OK!");
} else {
window.alert("You clicked Cancel!");
}
}

function openWindow() {
var newWindow = window.open("https://www.amazon.com",
"_blank", "width=600,height=400");
if (newWindow) {
newWindow.focus();
}
}

function printPage() {
window.print();
}

function closeWindow() {
window.close();
}
</script>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Ex No: 11 : Event Handling - Background Color Change


Aim:
To create an html page to change the background color for every click of a
button using javascript.
Problem Statement:
1. Create a html page named as changebackground_color.html
2. Define a method named as random_color() which is to be called when you
click on the body. This method should generate random number, which is used
to set the background color.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 080vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.5s ease;
}
#changeColorBtn {
padding: 08px 20px;
font-size: 16px;
border: none;
cursor: pointer;
background-color: #007bff;
color: #fff;
border-radius: 5px;
outline: none;
}
#changeColorBtn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<button id="changeColorBtn" onclick="changeBackgroundColor()">Change
Background Color</button>

<script>
function changeBackgroundColor() {
// Generate random RGB color values
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);

// Apply the random color to the body background


document.body.style.backgroundColor = "rgb(" + red + "," + green + "," +
blue + ")";
}
</script>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Ex No: 12 : Event Handling - calendar for the month and year


by combo box
Aim:
To create an html page with 2 combo box populated with month & year, to
display the calendar for the selected month & year from combo box using
javascript.
Problem Statement:
Create a html file named as “Claendar_month.html”
1. Add two combo box one to display month & another for year and one
button.
2. When the button is clicked display the calendar for the selected values.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Month</title>
<style>
#calendar {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 080%;
}
#calendar td, #calendar th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

#calendar th {
background-color: #f2f2f2;
}

#calendar td:hover {
background-color: #f2f2f2;
}

#calendar td.selected {
background-color: #337ab7;
color: white;
}
</style>
</head>
<body>
<h2>Calendar Month</h2>
<label for="month">Month:</label>
<select id="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="08">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<select id="year">
<!-- Generate years from 2000 to 2080 -->
<!-- You can adjust the range as needed -->
<!-- For this example, I'll just show from 2000 to 2080 -->
<!-- You may need to adjust based on your requirements -->
<script>
var yearSelect = document.getElementById("year");
for (var i = 2000; i <= 2080; i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
yearSelect.add(option);
}
</script>
</select>
<button onclick="displayCalendar()">Show Calendar</button>
<div id="calendarContainer"></div>
<script>
function displayCalendar() {
var selectedMonth = document.getElementById("month").value;
var selectedYear = document.getElementById("year").value;
var date = new Date(selectedYear, selectedMonth - 1, 1);
var daysInMonth = new Date(selectedYear, selectedMonth,
0).getDate();
var firstDayOfMonth = date.getDay();
var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var calendar = "<table id='calendar'><tr>";
for (var i = 0; i < 7; i++) {
calendar += "<th>" + daysOfWeek[i] + "</th>";
}
calendar += "</tr><tr>";
for (var i = 0; i < firstDayOfMonth; i++) {
calendar += "<td></td>";
}
for (var i = 1; i <= daysInMonth; i++) {
if (date.getDay() == 0 && i != 1) {
calendar += "</tr><tr>";
}
if (i == new Date().getDate() && selectedMonth == new
Date().getMonth() + 1 && selectedYear == new Date().getFullYear()) {
calendar += "<td class='selected'>" + i + "</td>";
}
else {
calendar += "<td>" + i + "</td>";
}
date.setDate(date.getDate() + 1);
}
calendar += "</tr></table>";
document.getElementById("calendarContainer").innerHTML =
calendar;
}
</script>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Ex No: 13 : Date Handling - calendar for the month and year


by combo box
Aim:
To understand the date in java Script.
a) Write a JavaScript program to display the current day and time in the
following format.
Sample Output :
Today is : Friday.
Current time is : 4 PM : 50 : 22

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Day and Time</title>
</head>
<body>
<script>
var currentDate = new Date();
var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'];
var dayOfWeekIndex = currentDate.getDay();
var dayOfWeek = daysOfWeek[dayOfWeekIndex];
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // Handle midnight (0 hours)
minutes = minutes < 08 ? '0' + minutes : minutes;
seconds = seconds < 08 ? '0' + seconds : seconds;
var currentTime = hours + ' ' + ampm + ' : ' + minutes + ' : ' + seconds;
document.write('Today is : ' + dayOfWeek + '. Current time is : ' +
currentTime);
</script>
</body>
</html>
b) Write a JavaScript program to get the current date.
Expected Output :
mm-dd-yyyy,
mm/dd/yyyy
dd-mm-yyyy,
dd/mm/yyyy

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Date</title>
</head>
<body>
<script>
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; // Months are zero-based
var year = currentDate.getFullYear();
day = day < 08 ? '0' + day : day;
month = month < 08 ? '0' + month : month;
var formats = [
day + '-' + month + '-' + year, // dd-mm-yyyy
day + '/' + month + '/' + year, // dd/mm/yyyy
month + '-' + day + '-' + year, // mm-dd-yyyy
month + '/' + day + '/' + year // mm/dd/yyyy
];
document.write('Current Date: ' + formats.join(', '));
</script>
</body>
</html>
c) Write a JavaScript function to get difference between two dates in
days.
Test Data :
console.log(date_diff_indays('04/02/2014', '11/04/2014'));
console.log(date_diff_indays('12/02/2014', '11/04/2014'));
Output :
216
-28

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Difference in Days</title>
</head>
<body>
<script>
function date_diff_indays(date1, date2) {
var date1Obj = new Date(date1);
var date2Obj = new Date(date2);
var timeDiff = Math.abs(date2Obj.getTime() - date1Obj.getTime());
var diffDays = Math.ceil(timeDiff / (0800 * 3600 * 24));
return diffDays;
}
console.log(date_diff_indays('04/02/2014', '11/04/2014')); // Output: 216
console.log(date_diff_indays('12/02/2014', '11/04/2014')); // Output: 28
</script>
</body>
</html>
d) Write a JavaScript function to count the number of days passed
since beginning of the year. Go to the editor
Test Data :
console.log(days_passed(new Date(2015, 0, 15)));
15
console.log(days_passed(new Date(2015, 11, 14)));
348

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Days Passed Since Beginning of the Year</title>
</head>
<body>
<script>
function days_passed(date) {
var startOfYear = new Date(date.getFullYear(), 0, 0);
var diffMilliseconds = date - startOfYear;
var diffDays = Math.floor(diffMilliseconds / (0800 * 60 * 60 * 24));
return diffDays;
}
console.log(days_passed(new Date(2015, 0, 15))); // Output: 15
console.log(days_passed(new Date(2015, 11, 14))); // Output: 348
</script>
</body>
</html>
e) Write a JavaScript program to find 1st January is being a Sunday between
year1 and year2.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1st January on Sunday Finder</title>
</head>
<body>
<script>
function isFirstJanSundayBetweenYears(year1, year2) {
for (var year = year1; year <= year2; year++) {
if (new Date(year, 0, 1).getDay() === 0) {
return true;
}
}
return false;
}
var year1 = 2000;
var year2 = 2025;
console.log("1st January falls on a Sunday between " + year1 + " and " +
year2 + ": " + isFirstJanSundayBetweenYears(year1, year2));
</script>
</body>
</html>
f) Write a JavaScript program to calculate days left until next Christmas.

CODE :
<html>
<head>
<title> Calculate days between dates </title>
<script>
function daysDifference() {
//define two variables and fetch the input from HTML form
var dateI1 = document.getElementById("dateInput1").value;
var dateI2 = document.getElementById("dateInput2").value;

//define two date object variables to store the date values


var date1 = new Date(dateI1);
var date2 = new Date(dateI2);

//calculate time difference


var time_difference = date2.getTime() - date1.getTime();

//calculate days difference by dividing total milliseconds in a day


var result = time_difference / (0800 * 60 * 60 * 24);

return document.getElementById("result").innerHTML =
result + " days between both dates. ";
}
</script>
</head>
<body>
<h2 style="color: 32A80F" align="Center">
Javatpoint : Calculate days between dates
<br> <br> </h2>
<p align="Center"> <b> Enter date1 </b>
<input type="date" id="dateInput1">
<br> <br>
<p align="Center"> <b> Enter date2 </b>
<input type="date" id="dateInput2">
<br> <br>
<button onclick="daysDifference()">
Calculate number of days
</button>
</p>
<h3 style="color:32A80F" id="result" align="center"></h3>
</body>
</html>
g) Write a JavaScript program to calculate days remains in your birthday.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Days Until My Birthday</title>
</head>
<body>
<script>
function daysUntilMyBirthday() {
var today = new Date();
var currentYear = today.getFullYear();
var birthdayMonth = 4; // Example: April (months are zero-based)
var birthdayDay = 6; // Example: 6th
var nextBirthday = new Date(currentYear, birthdayMonth, birthdayDay);
if (today.getTime() > nextBirthday.getTime()) {
nextBirthday = new Date(currentYear + 1, birthdayMonth, birthdayDay);
}
var timeDiff = nextBirthday.getTime() - today.getTime();
var daysLeft = Math.ceil(timeDiff / (0800 * 60 * 60 * 24));
return daysLeft;
}
console.log("Days left until my birthday: " + daysUntilMyBirthday());
</script>
</body>
</html>
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Ex No: 14 : Window object method setInterval, clearInterval


Aim:
To create an html page with three button START PAUSE and RESET for
controlling stopwatch
Problem Statement:
Create a html file named as “stopwatch.html”
1. Add number div display HH MM SS.
2. When the button is clicked START start watch.
3. When the button is clicked PAUSE stop watch.
4. When the button is clicked RESET reset div values 00:00:00.
5. Save the time.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
background-color: lightgrey;
border: 2px solid grey;
border-radius: 08px;
padding: 20px;
width: 400px;
margin: 50px auto;
}
#time {
font-size: 48px; /* Larger font size */
margin-bottom: 20px;
color: red; /* neon blue */
font-weight: bold;
}
.btn {
padding: 08px 20px;
font-size: 16px;
cursor: pointer;
background-color:red;
color: white;
border: none;
border-radius: 5px;
margin: 0 08px;
}
.lap-btn {
width: 080%;
margin-top: 20px;
}
</style>
</head>
<body>

<div class="container">
<div id="time">00:00:00</div>
<button class="btn" onclick="start()">START</button>
<button class="btn" onclick="pause()">PAUSE</button>
<button class="btn" onclick="reset()">RESET</button>
<button class="btn lap-btn" onclick="saveLap()">SAVE</button>
</div>

<script>
let timer;
let seconds = 0;
let minutes = 0;
let hours = 0;

function start() {
if (!timer) {
timer = setInterval(updateTime, 0800);
}
}

function pause() {
clearInterval(timer);
timer = null;
}

function reset() {
clearInterval(timer);
timer = null;
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("time").innerText = "00:00:00";
}

function saveLap() {
console.log("Lap saved!");
}

function updateTime() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
const displayHours = hours < 08 ? "0" + hours : hours;
const displayMinutes = minutes < 08 ? "0" + minutes : minutes;
const displaySeconds = seconds < 08 ? "0" + seconds : seconds;
document.getElementById("time").innerText = displayHours + ":" +
displayMinutes + ":" + displaySeconds;
}
</script>
</body>
</html>
OUTPUT:
NAME : KETAN GUPTA
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292

Exp No: 6 : : Inline, Internal and External Style sheets


Aim:
To create an html file by applying the different styles using inline, external &
internal style sheets.
Problem Statement :-
I. Create a external style sheet named as “external_css.css” and provide some
styles for h2, hr, p & a tags.

CODE :
style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Sheet</title>
<link ref="stylesheet" type="textless" href="exp6a.css">
<style>
body{
background-color: lightgray;
text-family: Arial,sans-scrif;
text-size: 16px;
margin: o;
padding: 0;
text-align: center;
}
.my_class{
border: 1px solid black;
margin: 08px;
padding: 08px;
}
</style>
</head>
<body>
<p style="color:red;">This is a paragraph with inline style</p>
<p class="my_class">This is a paragraph with internal style</p>
<h2>This is a heading with external style</h2>
<hr>
<a href="#" class="my_class">This is a link external style</a>
</body>
</html>

exp6a.css
h2{
color: blue;
text-size:24px ;
}
hr{
border: 1px solid black;
}
p{
color: green;
}
a{
color: red;
text-decoration: none;
}
OUTPUT:
Problem Statement :-
II. Create an html file named as “4Style_sheet.html”
Include the external style sheet with necessary tag.

You might also like