Name: Ketan Gupta Section: G Class Roll No: 30 University Roll No: 2019292
Name: Ketan Gupta Section: G Class Roll No: 30 University Roll No: 2019292
SECTION : G
CLASS ROLL NO : 30
UNIVERSITY ROLL NO : 2019292
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
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:
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
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
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
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="π"
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^" 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="√" 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="±" 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="." onclick="addChar(this.form.display, '.')"></td>
<td><input type="button" class="btnOpps" name="btnOpps"
value="x2" 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
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
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);
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
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;
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
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
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.