Scribd
Upload
47 views57 pages

Lab Webd Rachna

The document provides code snippets to demonstrate different HTML tags and features. It includes code for basic HTML tags, lists, tables, forms and frames. For lists, it shows ordered, unordered and definition lists. For tables, it includes a sample timetable. For forms, it demonstrates various form elements. For frames, it divides the page into frames and links different frame examples.

Uploaded by

shubammalhotra64
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
47 views57 pages

Lab Webd Rachna

The document provides code snippets to demonstrate different HTML tags and features. It includes code for basic HTML tags, lists, tables, forms and frames. For lists, it shows ordered, unordered and definition lists. For tables, it includes a sample timetable. For forms, it demonstrates various form elements. For frames, it divides the page into frames and links different frame examples.

Uploaded by

shubammalhotra64
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/ 57

/*

NAME : RACHNA
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q1. 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 ( <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>
<h1><marquee>Basic HTML Tags</marquee></h1>
<h1>Paragraph</h1>
<h2>Horizontal Line</h2>
<h3>Line Break</h3>
<h4>Block Quote</h4>
<h5>Pre tag</h5>
<h6>Listing tags</h6>
<p>HTML stands for HyperText Markup Language. It is the standard markup language
used to create web pages. HTML is a combination of Hypertext and Markup language.
Hypertext defines the link between web pages. A markup language is used to define the
text document within the tag to define the structure of web pages.</p>
<hr>
<br>
<p><blockquote>This language is used to annotate (make notes for the computer) text
so that a machine can understand it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.</blockquote></p>
<p><b>Different logical style</b></p>
<p><u>Different logical style</u></p>
<p><code>Different Physical Style</code></p>
<p><del>Different Physical Style</del></p>
<p><kbd>Different Physical Style</kbd></p>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q2. Create a simple html file to demonstrate the use of different HTML tags(List,
Table).
2.1.Nested ordered list.
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>
<h4>Here is a nested ordered list:</h4>
<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>
<h5>Disc bullets list:</h5>
<ul style="list-style-type: disc;">
<li>keyboard</li>
<li>mouse</li>
<li>monitor</li>
</ul>
<h5>Circle bullets list:</h5>
<ul style="list-style-type: circle;">
<li>CRT</li>
<li>LCD</li>
<li>LED</li>
</ul>
<h5>Square bullets list:</h5>
<ul style="list-style-type: square;">
<li>Windows</li>
<li>Linux</li>
<li>Android</li>
</ul>
<h5>A Definition List:</h5>
<dl>
<dt>Coffee</dt>
<dd>Black Coffee OR Milk Coffee</dd>
<dt>Milk</dt>
<dd>Hot White milk OR Cold Chocolate Milk</dd>
</dl>
</body>
</html>
Q2.2. Time Table
<html>
<head>
<title>TIME-TABLE</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<p align="center"><b>GRAPHIC ERA DEEMED TO BE UNIVERSITY <br> TIME
TABLE OF B.TECH.VIth SEMESTER-COMPUTER SCIENCE & ENGG.-H <br>
ACADEMIC YEAR 2023-24</b> </p>
<p align="left"><b>Room No.:-LT-7</b></p>
<table >
<tr>
<th></th>
<th >8:05-9:00</th>
<th >9:00-9:55</th>
<th>9:55-10:50</th>
<th>11:00-12:00</th>
<th>12:05-01:00</th>
<th>1:00-1:55</th>
<th>1:55-2:50</th>
<th>3:10-4:00</th>
<th>4:00-4:55</th>
<th>4:55-5:50</th>
</tr>
<tr>
<th>Mon</th>
<td colspan="2"> SWAYAM/Training/Extra Curricular Activities/LIB</td>
<td align="center"><mark>TCS-693 <br>LT-7</td>
<td colspan="2" align="center">Placement Preparation Classes<br>LT-7</td>
<td>LUNCH</td>
<td colspan="2" align="center">Software Engineering Lab<br><b>Digital Lab-
1</b></td>

<td align="center"><mark>TCS-601<br><b>LT-5</b></td>
<td align="center"><mark>TCS-601<br><b>LT-5</b></td>
</tr>
<tr>
<th>Tue</th>
<td colspan="2" align="center"><mark >TCS-611<br>(<b>Online</b>)</td>
<td colspan="2" align="center">SWAYAM/Training/Extra Curricular
Activities/LIB</td>
<td>LUNCH</td>
<td align="center"><mark>TCS-693 <br>LT-7</td>
<td colspan="2" align="center">Web Development
Lab(<b>G1</b>)<br><b>New Lab-1</b> <br>Compiler Design
Lab(<b>G2</b>)<br><b>New Lab-2</b></td>

<td align="center"><mark><b>Elective</b></td>
<td align="center"><mark><b>Elective</b></td>
</tr>
<tr>
<th>Wed</th>
<td colspan="2" align="center">Competitive<br>Programming<br>(TOC-601)-
Audit<br>Course<br>(Online)</td>
<td align="center">LIB</td>
<td colspan="2" align="center">Placement Preparation Classes<br>LT-7</td>
<td>LUNCH</td>
<td colspan="2" align="center">Web Development Lab(<b>G2</b>)<br><b>New
Lab-1</b> <br>Compiler Design Lab(<b>G1</b>)<br><b>New Lab-2</b></td>
<td align="center"><mark><b>Elective</b></td>
<td align="center"><mark><b>Elective</b></td>
</tr>
<tr>
<th>Thu</th>
<td align="center"><mark>TCS-604<br>LT-7</td>
<td align="center"><mark>TCS-604<br>LT-7</td>
<td align="center"><mark>TCS-693<br>LT-7</td>
<td align="center"><mark>XCS-601(QAR)<br>LT-7</td>
<td align="center"><mark>TCS-601<br>LT-7</td>
<td align="center">LUNCH</td>
<td colspan="4" 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(Soft Skills)<br>LT-7</td>
<td align="center"><mark>TCS-611<br>(Discussion)<br>LT-7</td>
<td>LUNCH</td>
<td colspan="2" align="center">Software Engineering Lab<br><b>Digital Lab-
1</b></td>

<td align="center"><mark>TCS-604<br>LT-7</td>
<td align="center"><mark>TCS-6044rr4<br>LT-7</td>
</tr>
</table>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q3. Create a simple html file to demonstrate the use of HTML tag(FORM).
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>
</head>
<body bgcolor="lightblue">
<h2 align="center"><font color="brown">ENTRY FORM</font></h2>
<form>
<h4><font color="brown">Enter your Name : </font><input type="text"></h4>
<h4><font color="brown">Enter your Age : </font><input type="text"
size="3"></h4>
<h4><font color="brown">Enter your Address : </font></h4>
<textarea rows="5" cols="30" ></textarea>
<h4><font color="brown">Sex : </font>
<input type="radio"> <font color="brown">Female</font><br>
<input type="radio"> <font color="brown">Male</font>
</h4>
<h4><font color="brown">Nationality : </font>
<select>
<option>(Please select a country)</option>
<option >India</option>
<option>Australia</option>
</select>
</h4>
<h4><font color="brown">Languages Known : </font>
<input type="checkbox" ><font color="brown">C</font><br>
<input type="checkbox"><font color="brown">C++</font><br>
<input type="checkbox"><font color="brown">VB</font><br>
<input type="checkbox"><font color="brown">JAVA</font><br>
<input type="checkbox"><font color="brown">ASP</font><br>
<input type="checkbox"><font color="brown">OTHERS</font><br>
</h4>
<h4><font color="brown">Enter your Password : </font>
<input type="password">
</h4>

<p align="center">
<input type="Submit" value="Reset">
<input type="Submit" value="Submit">
</p>
</form>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q4. Create an html page with different types of frames such as floating frame,
navigation frame & mixed frame.
Q4a. 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.
a. Frames HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FRAMES</title>
</head>
<frameset cols="20%,80%" >
<frame name="first frame" src="mainfile.html"></frame>
<frame name="second frame"></frame>
</frameset>
<body>
</body>
</html>
b. src file-main HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main file</title>
</head>
<body>
<a href="navigationframe.html" target="frames">navigation frame</a>
<hr>
<a href="floatingframe.html" target="frames">floating frame</a>
<hr>
<a href="noframe.html" target="frames">no frame</a>
<hr>
<a href="mixedframe.html" target="frames">mixed frame</a>
<hr>
</body>
</html>
Q4b. 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.
a. Navigation HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation frame</title>
</head>
<frameset cols="40%, 60%">
<frame name="first frame" src="mainfile.html"></frame>
</frameset>
<body>
</body>
</html>
Q4c .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.
a. Floating frame HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLOATING FRAME</title>
</head>
<frameset cols="20%, 80%">
<frame name="first frame" src="mainfile.html"></frame>
<frameset cols="40% , 60%">
<frame name="second frame" src="paragraph.html"></frame>
</frameset>
</frameset>
<body>
</body>

b. src file- paragraph HTML file


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PARAGRAPH</title>
</head>
<body>
<p align="center">File Name :pagelink.html</p>
<p align="center">Basic HTML Tags</p>
<p align="center">
<a href="https://www.w3schools.com/html/html_headings.asp">Heading
Tags</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">Text
Elements</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">Line break
Tags</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">BLOCK QUOTE
Tags</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">PRE Tags</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">Logical
Style</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">Physical
style</a><br>
<a href="https://www.w3schools.com/html/html_headings.asp">Listing Tags</a>
</p>
<h2 align="center"><font color="red">Heading Tags => <br> font size-18 pt,<br>
colour-RED</font></h2>
<h1 align="center"><font color="black">Heading H1 <br> 24 pt<br></font></h1>
<h2 align="center"><font color="black">Heading H2 - 18 <br></font></h2>
</body>
</html>
Q4d. 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.
<!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="image.html"></frame>
<frameset rows="50%,50%">
<frame name="video" src="video.html"></frame>
<frame name="Time table" src="timetable.html"></frame>
</frameset>
</frameset>
<body>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q5.Create an html page with different types of image map such as circle, rect , poly
& mixed map.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGE_MAP</title>
</head>
<body>
<img src="C:\Users\kriti\OneDrive\Desktop\image1.png" alt="image
usemap="#imagemap">
<map name="imagemap">
<area shape="circle" coords="288 221 67" alt="Circle"
href="https://www.splashlearn.com/math-vocabulary/geometry/circle">
<area shape="rect" coords="500,137,758,275" alt="Rectangle"
href="https://www.splashlearn.com/math-vocabulary/geometry/rectangle">
<area shape="poly" coords="434,355,346,422,379,527,489,525,526,423"
alt="Polygons"
href="https://www.splashlearn.com/math-vocabulary/geometry/polygon">
</map>
</body>
</html>
Q5a. 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.
<!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>
#message {
display: none;
position: absolute;
top: 50%;
left: 50%;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>
</head>
<body>
<h1>Click on a Circle Button</h1>
<img src="C:\Users\kriti\OneDrive\Pictures\123\Iphone-dialer-for-Android-phone-
min.png" width="400" usemap="#buttonmap" alt="Dialler Image">
<div id="message"></div>
<map name="buttonmap">
<area shape="circle" coords="100,100,30" href="#" onclick="showMessage(1)"
alt="Button 1">
<area shape="circle" coords="200,100,30" href="#" onclick="showMessage(2)"
alt="Button 2">
<area shape="circle" coords="300,100,30" href="#" onclick="showMessage(3)"
alt="Button 3">
<area shape="circle" coords="100,200,30" href="#" onclick="showMessage(4)"
alt="Button 4">
<area shape="circle" coords="200,200,30" href="#" onclick="showMessage(5)"
alt="Button 5">
<area shape="circle" coords="300,200,30" href="#" onclick="showMessage(6)"
alt="Button 6">
<area shape="circle" coords="100,300,30" href="#" onclick="showMessage(7)"
alt="Button 7">
<area shape="circle" coords="200,300,30" href="#" onclick="showMessage(8)"
alt="Button 8">
<area shape="circle" coords="300,300,30" href="#" onclick="showMessage(9)"
alt="Button 9">
</map>
<script>
function showMessage(buttonNumber) {
var messageDiv = document.getElementById("message");
messageDiv.innerHTML = "You pushed button " + buttonNumber;
messageDiv.style.display = "block";
setTimeout(function() {
messageDiv.style.display = "none";
}, 2000);
}
</script>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q6. Create an html file by applying the different styles using inline, external &
internal style sheets.
1. Create a external style sheet named as “external_css.css” and provide some styles
for h2, hr, p & a tags.
2. Create an html file named as “4Style_sheet.html”
1. Include the external style sheet with necessary tag.
2. Include the internal style sheet for body tags & also use class name, so that the
style can be applied for all tags.
3. Include a <p> tags with inline style sheet.
External CSS file :
h2 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
hr {
border: 1px solid #999;
margin: 20px 0;
}
p{
color: #666;
font-size: 16px;
line-height: 1.5;
}
a{
color: #007bff;
text-decoration: none;
}
HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4Style_sheet</title>
<!-- External Style Sheet -->
<link rel="stylesheet" type="text/css" href="external_css.css">
<style>
/* Internal Style Sheet */
.body-style {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
margin: 0;
}
</style>
</head>
<body class="body-style">
<!-- Inline Style for p tag -->
<p style="font-style: italic;">This is a paragraph with inline style.</p>
<h2>Heading</h2>
<p>This is a paragraph.</p>
<a href="#">Link</a>
<hr>
</body>
</html>
Q6a. Create a HTML file by using CSS to give the desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS_Q6_a</title>
<style type="text/CSS">
.A{
color:green;
border-width:5px;
border-style:solid;
border-color:magenta;
width:50%;
background-color: pink;
padding:10px 10px 10px 10px;
}
.B{
color:black;
}
.C{
color:blue;
border-style:dotted;
border-color:blue;
background-color:lightblue;
width:50%;
}
.D{
color:red;
border-style:dashed;
border-color:blue;
background-color:lightgreen;
width:50%;
}
</style>
</head>
<body>
<h2 class="A">This Is My Stylish Website</h2>
<pre class="B">Home Backgrounds Lists Id Vs. Class</pre>
<h2 class="C">This website is about me!</h2>
<p class="B">My Top Three Favourite Things To Do</p>
<p class="D">1.<b>T</b>ravel<br>2.<b>E</b>at ice cream<br>3.<b>R</b>ead a
book
</p>
</body>
</html>
Q6b. Create a HTML file by using CSS to give the desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS_Q6_b</title>
<style>
.head-foot{
color:blue;
border:5px black solid;
background-color: gold;
padding:5px 5px 5px 5px;
}
.menu{
color:blue;
border:5px black solid;
background-color: gold;
width:7%;
padding:4px 4px 500px 10px;
}
#first{
border:5px black solid;
width:1105px;
height:520px;
float:right;
margin:-546px 10px 20px 40px;
background-color: pink;
}
#second{
border:5px black solid;
background-color: gold;;
width:1080px;
height:40px;
margin:10px 5px;
}
#third{
border:5px black solid;
background-color: aqua;
width:80px;
height:20px;
margin:-50px 15px;
border-radius:13px;
}
#fourth{
border:5px black solid;
background-color: aqua;
width:80px;
height:20px;
margin:22px 115px;
border-radius:13px;
}
#fifth
{
border:5px black solid;
background-color: aqua;
width:80px;
height:20px;
margin:-52px 215px;
border-radius:13px;
}
#sixth{
color: blue;
margin:25px 350px;
}
#seventh{
border:5px black solid;
width:930px;
height:140px;
float:right;
margin:15px 10px 20px 40px;
padding: 200px 50px 75px 100px;
background-color: aqua;
}
</style>
</head>
<body>
<p class="head-foot">header</p>
<p class="menu">menu</p>
<div id=first>
<p id="second"></p>
<p id="third" align="center">tool 1</p>
<p id="fourth" align="center">tool 2</p>
<p id="fifth" align="center">tool 3</p>
<p id="sixth" >nav bar with buttons</p>
<p id="seventh" align="center" >map [through mapstraction if that matters]</p>
</div>
<p class="head-foot">footer</p>
</body>
</html>
Q6c. Create a HTML file by using CSS to give the desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q6_c</title>
<style>
.header{
text-align: center;
background-color: lightseagreen;
color:white;
font-size:30px;
padding-top:10px;
padding-bottom:10px;
}
.aside{
text-align:center;
background-color: lightseagreen;
color:white;
font-size:30px;
width:300px;
padding-top:250px;
padding-bottom:250px;
}
.article{
text-align:center;
color:white;
font-size:30px;
border:0px solid;
width:1250px;
height:335px;
float:right;
margin-top:-565px;
padding-top:200px;
background-color:crimson;
}
.image1{
border:0px solid;
color:white;
background-color: grey;
height:100px;
float:right;
margin-top:-300px;
margin-right:950px;
padding:80px 80px 80px 80px;
}
.image2{
border:0px solid;
color:white;
background-color: grey;
height:100px;
float:right;
margin-top:-300px;
margin-right:700px;
padding:80px 80px 80px 80px;
}
.image3{
border:0px solid;
color:white;
background-color: grey;
height:100px;
float:right;
margin-top:-300px;
margin-right:450px;
padding:80px 80px 80px 80px;
}
.image4{
border:0px solid;
color:white;
background-color: grey;
height:100px;
float:right;
margin-top:-300px;
margin-right:200px;
padding:80px 80px 80px 80px;
}
.footer{
text-align: center;
background-color: lightseagreen;
color:white;
font-size:30px;
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body bgcolor="lightcoral">
<p class="header">Header</p>
<div class="first">
<p class="aside">Aside</p>
<p class="article">Article</p>
<p class="image1">Image</p>
<p class="image2">Image</p>
<p class="image3">Image</p>
<p class="image4">Image</p>
</div>
<p class="footer">Footer</p>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q7. Input Output in JavaScript
7a. Create a HTML page to explain input and output using a calculator with the use
of various predefined functions and objects in JavaScript.
<!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 {
text-align: center;
background-color: pink;
}
.container {
margin-top: 50px;
}
input[type="text"], input[type="button"] {
padding: 10px;
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h2> <font color="brown">JAVASCRIPT CALCULATOR</font></h2>
<input type="text" id="input" readonly>
<br>
<input type="button" value="7" onclick="addToInput('7')">
<input type="button" value="8" onclick="addToInput('8')">
<input type="button" value="9" onclick="addToInput('9')">
<input type="button" value="+" onclick="addToInput('+')">
<br>
<input type="button" value="4" onclick="addToInput('4')">
<input type="button" value="5" onclick="addToInput('5')">
<input type="button" value="6" onclick="addToInput('6')">
<input type="button" value="-" onclick="addToInput('-')">
<br>
<input type="button" value="1" onclick="addToInput('1')">
<input type="button" value="2" onclick="addToInput('2')">
<input type="button" value="3" onclick="addToInput('3')">
<input type="button" value="*" onclick="addToInput('*')">
<br>
<input type="button" value="0" onclick="addToInput('0')">
<input type="button" value="." onclick="addToInput('.')">
<input type="button" value="/" onclick="addToInput('/')">
<input type="button" value="%" onclick="addToInput('%')">
<br>
<input type="button" value="=" onclick="calculate()"> <input type="button"
value="Clear" onclick="clearInput()">
</div>

<script>
function addToInput(value) {
document.getElementById("input").value += value;
}
function clearInput() {
document.getElementById("input").value = "";
}

function calculate() {
try {
var input = document.getElementById("input").value;
var result = eval(input);

if (isNaN(result)) {
throw "Invalid expression";
}
document.getElementById("input").value = result;
} catch (error) {
document.getElementById("input").value = error;
}
}
</script>
</body>
</html>
Q7b. Create a HTML page to explain input and output using a scientific calculator
with the use of various predefined functions and objects in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scientific Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: beige;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background-color: #8B4513;
border-radius: 10px;
box-shadow: 5px 5px 15px black;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #D2B48C;
}
.button-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.button-row input[type="button"] {
flex: 1;
padding: 10px;
font-size: 18px;
margin-right: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #F5F5DC;
}
.button-row input[type="button"]:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<h1><font color=brown>SIMPLE SCIENTIFIC CALCULATOR</font></h1>
<div class="container">
<div class="calculator">
<input type="text" id="display" readonly>
<div class="button-row">
<input type="button" value="1" onclick="addToDisplay('1')">
<input type="button" value="2" onclick="addToDisplay('2')">
<input type="button" value="3" onclick="addToDisplay('3')">
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="<-" onclick="backspace()">
<input type="button" value="=" onclick="calculate()">
</div>
<div class="button-row">
<input type="button" value="4" onclick="addToDisplay('4')">
<input type="button" value="5" onclick="addToDisplay('5')">
<input type="button" value="6" onclick="addToDisplay('6')">
<input type="button" value="-" onclick="addToDisplay('-')">
<input type="button" value="%" onclick="addToDisplay('%')">
<input type="button" value="cos" onclick="addToDisplay('Math.cos(')">
</div>
<div class="button-row">
<input type="button" value="7" onclick="addToDisplay('7')">
<input type="button" value="8" onclick="addToDisplay('8')">
<input type="button" value="9" onclick="addToDisplay('9')">
<input type="button" value="*" onclick="addToDisplay('*')">
<input type="button" value="n!" onclick="calculateFactorial()">
<input type="button" value="sin" onclick="addToDisplay('Math.sin(')">
</div>
<div class="button-row">
<input type="button" value="." onclick="addToDisplay('.')">
<input type="button" value="0" onclick="addToDisplay('0')">
<input type="button" value="," onclick="addToDisplay(',')">
<input type="button" value="+" onclick="addToDisplay('+')">
<input type="button" value="/" onclick="addToDisplay('/')">
<input type="button" value="tan" onclick="addToDisplay('Math.tan(')">
</div>
<div class="button-row">
<input type="button" value="E" onclick="addToDisplay('Math.E')">
<input type="button" value="π" onclick="addToDisplay('Math.PI')">
<input type="button" value="x^y" onclick="addToDisplay('**')">
<input type="button" value="(" onclick="addToDisplay('(')">
<input type="button" value=")" onclick="addToDisplay(')')">
<input type="button" value="log" onclick="addToDisplay('Math.log(')">
</div>
<div class="button-row">
<input type="button" value="√" onclick="addToDisplay('Math.sqrt(')">
<input type="button" value="LN2" onclick="addToDisplay('Math.LN2')">
<input type="button" value="LN10" onclick="addToDisplay('Math.LN10')">
<input type="button" value="log2E" onclick="addToDisplay('Math.LOG2E')">
<input type="button" value="log10E" onclick="addToDisplay('Math.LOG10E')">
<input type="button" value="EXP" onclick="addToDisplay('Math.exp(')">
</div>
</div>
</div>

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

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

function backspace() {
var display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}

function calculate() {
try {
var expression = document.getElementById("display").value;
var result = eval(expression);
document.getElementById("display").value = result;
} catch (error) {
document.getElementById("display").value = "Error";
}
}

function calculateFactorial() {
var expression = document.getElementById("display").value;
var num = parseInt(expression);
if (isNaN(num) || num < 0) {
document.getElementById("display").value = "Error";
return;
}
var factorial = 1;
for (var i = 2; i <= num; i++) {
factorial *= i;
}
document.getElementById("display").value = factorial;
}
</script>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q8. Create a html page to explain the use of various predefined functions in window
object in java script. Window Object methods alert() , prompt() , confirm(), open(),
close() , print() . Create an html page named as “window.html” and within the script
tag use different window object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window Object Functions in JavaScript</title>
</head>
<body>
<h1>Demonstrating Window Object Functions in JavaScript</h1>
<p>Click the buttons below to see various window object functions in action:</p>
<button onclick="showAlert()">Show Alert</button>
<button onclick="getPrompt()">Prompt for Input</button>
<button onclick="showConfirm()">Confirm Action</button>
<button onclick="openNewWindow()">Open New Window</button>
<button onclick="closeNewWindow()">Close New Window</button>
<button onclick="printPage()">Print This Page</button>
<script>
// 1. Alert
function showAlert() {
window.alert("This is an alert message!");
}
// 2. Prompt
function getPrompt() {
const userInput = window.prompt("Enter your name:");
if (userInput) {
window.alert("Hello, " + userInput + "!");
}
}
// 3. Confirm
function showConfirm() {
const userConfirmed = window.confirm("Do you want to continue?");
if (userConfirmed) {
window.alert("You chose to continue.");
} else {
window.alert("You chose to stop.");
}
}
let newWindow = null; // Variable to hold the reference to the new window
// 4. Open a New Window
function openNewWindow() {
if (!newWindow || newWindow.closed) {
newWindow = window.open("", "_blank", "width=400,height=400");
newWindow.document.write("<h2>This is a new window!</h2>");
}
}
// 5. Close the New Window
function closeNewWindow() {
if (newWindow && !newWindow.closed) {
newWindow.close();
} else {
window.alert("No open window to close.");
}
}
// 6. Print
function printPage() {
window.print();
}
</script>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q9. Event Handling - Background Color Change
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
padding: 10px 20px;
margin : 100px;
cursor:pointer;
color:blue;
}
</style>
</head>
<body onclick="random_color()">
<button onclick="random_color()">Click to change background color</button>
<script>
function random_color()
{
let red=Math.floor(Math.random()*256);
let green=Math.floor(Math.random()*256);
let blue=Math.floor(Math.random()*256);
document.body.style.backgroundColor=`rgb(${red},${green},${blue})`;
}
</script>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q10. Event Handling - calendar for the month and year by combo box
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<style>
.calendar {
border-collapse: collapse;
width: 50%;
margin-top: 20px;
}
.calendar th, .calendar td {
border: 1px solid #ddd;
text-align: center;
padding: 8px;
}
.calendar th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Calendar</h1>

<label for="month">Select 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="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<br><br>
<label for="year">Select Year:</label>
<select id="year">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
<br><br>
<button onclick="displayCalendar()">Show Calendar</button>
<div id="calendar-container"></div>

<script>
function getDaysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function displayCalendar() {
const month = parseInt(document.getElementById("month").value);
const year = parseInt(document.getElementById("year").value);
const calendarContainer = document.getElementById("calendar-container");
calendarContainer.innerHTML = "";

const daysInMonth = getDaysInMonth(month, year);


const startDay = new Date(year, month - 1, 1).getDay();

const calendar = document.createElement("table");


calendar.className = "calendar";

const headerRow = document.createElement("tr");


const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
daysOfWeek.forEach(day => {
const th = document.createElement("th");
th.textContent = day;
headerRow.appendChild(th);
});
calendar.appendChild(headerRow);
let dayCount = 1;
const weeks = Math.ceil((daysInMonth + startDay) / 7);
for (let i = 0; i < weeks; i++) {
const row = document.createElement("tr");
for (let j = 0; j < 7; j++) {
const cell = document.createElement("td");
if ((i === 0 && j < startDay) || dayCount > daysInMonth) {
cell.textContent = "";
} else {
cell.textContent = dayCount;
dayCount++;
}
row.appendChild(cell);
}
calendar.appendChild(row);
}
calendarContainer.appendChild(calendar);
}
</script>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q11. Date Handling - calendar for the month and year by combo box
Aim: To understand the date in java Script.
11a. 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Handling</title>
</head>
<body>
<script>
let date1=new Date();
let dayOfWeek=date1.getDay();
let
days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
let dayToday="Today is "+ " : "+days[dayOfWeek];
document.write(dayToday+"\n");
let hrs=date1.getHours();
let min=date1.getMinutes();
let sec=date1.getSeconds();
let m="AM";
if(hrs>=12)
{
m="PM";
hrs=hrs-12;
}

if(min<10)
{
min="0"+min;
}
if(sec<10)
{
sec="0"+sec;
}
let currentTime="Current time is "+hrs+m+" : "+min+" : "+sec;
document.write(currentTime);
</script>
</body>
</html>
Q11b. Write a JavaScript program to get the current date. Expected Output : mm-dd-yyyy,
mm/dd/yyyy or dd-mm-yyyy, dd/mm/yyyy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Current Date Formats</title>
</head>
<body>
<h1>Current Date in Different Formats</h1>
<div id="output">
</div>
<script>
function getCurrentDate() {
const now = new Date();
const day = String(now.getDate()).padStart(2, '0');
const month = String(now.getMonth() + 1).padStart(2, '0');
const year = now.getFullYear();
const mm_dd_yyyy = `${month}-${day}-${year}`;
const mm_slash_dd_yyyy = `${month}/${day}/${year}`;
const dd_mm_yyyy = `${day}-${month}-${year}`;
const dd_slash_mm_yyyy = `${day}/${month}/${year}`;
return {
"mm-dd-yyyy": mm_dd_yyyy,
"mm/dd/yyyy": mm_slash_dd_yyyy,
"dd-mm-yyyy": dd_mm_yyyy,
"dd/mm/yyyy": dd_slash_mm_yyyy
};
}
function displayCurrentDate() {
const currentDate = getCurrentDate();
const output = document.getElementById("output");
const dateStrings = `
<p>mm-dd-yyyy: ${currentDate["mm-dd-yyyy"]}</p>
<p>mm/dd/yyyy: ${currentDate["mm/dd/yyyy"]}</p>
<p>dd-mm-yyyy: ${currentDate["dd-mm-yyyy"]}</p>
<p>dd/mm/yyyy: ${currentDate["dd/mm/yyyy"]}</p>
`;
output.innerHTML = dateStrings;
}
window.onload = displayCurrentDate;
</script>
</body>
</html>
Q11c. Write a JavaScript function to get difference between two dates in days.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Difference Between Two Dates in Days</title>
</head>
<body>
<h1>Calculate Difference Between Two Dates in Days</h1>
<label for="date1">Enter the first date (MM/DD/YYYY):</label>
<input type="text" id="date1" value="04/02/2014" /> <br>
<label for="date2">Enter the second date (MM/DD/YYYY):</label>
<input type="text" id="date2" value="11/04/2014" /> <br>
<button onclick="calculateDateDifference()">Calculate Difference</button>
<div id="result"></div>
<script>
function date_diff_in_days(date1, date2) {
const d1 = new Date(date1);
const d2 = new Date(date2);
const diffInMilliseconds = d2 - d1;
const diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24);
return Math.round(diffInDays);
}
function calculateDateDifference() {
const date1 = document.getElementById("date1").value;
const date2 = document.getElementById("date2").value;
const daysDifference = date_diff_in_days(date1, date2);
document.getElementById("result").innerHTML = `The difference between the
dates is ${daysDifference} days.`;
}
</script>
</body>
</html>
Q11d. . Write a JavaScript function to count the number of days passed since
beginning of the year.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Days Passed Since Start of Year</title>
</head>
<body>
<h1>Days Passed Since Beginning of the Year</h1>
<label for="date">Enter a date (MM/DD/YYYY):</label>
<input type="text" id="date" value="01/15/2015" />
<button onclick="calculateDaysPassed()">Calculate Days Passed</button>
<div id="result"></div>
<script>
function days_passed(date) {
const givenDate = new Date(date);
const startOfYear = new Date(givenDate.getFullYear(), 0, 1);
const diffInMilliseconds = givenDate - startOfYear;
const diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24);
return Math.round(diffInDays);
}
function calculateDaysPassed() {
const dateInput = document.getElementById("date").value;
const days = days_passed(dateInput);
document.getElementById("result").innerHTML = `Number of days passed since
the beginning of the year: ${days}`;
}
</script>
</body>
</html>
Q11e. Write a JavaScript program to find 1st January is being a Sunday between
year1 and year2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>January 1 as Sunday</title>
</head>
<body>
<h1>Years Where January 1 Is a Sunday</h1>
<label for="startYear">Start Year:</label>
<input type="number" id="startYear" value="2000" />
<label for="endYear">End Year:</label>
<input type="number" id="endYear" value="2030" />
<br><br>
<button onclick="findYearsWithSunday()">Find Years</button>
<br><br>
<div id="result"></div>
<script>
function findYearsWithSunday() {
const startYear = parseInt(document.getElementById("startYear").value);
const endYear = parseInt(document.getElementById("endYear").value);
const yearsWithSunday = [];
for (let year = startYear; year <= endYear; year++) {
const jan1 = new Date(year, 0, 1);
if (jan1.getDay() === 0) {
yearsWithSunday.push(year);
}
}
if (yearsWithSunday.length > 0) {
document.getElementById("result").innerHTML =
`Years where January 1 is a Sunday between ${startYear} and ${endYear}: $
{yearsWithSunday.join(", ")}`;
} else {
document.getElementById("result").innerHTML =
`No years between ${startYear} and ${endYear} have January 1 falling on a
Sunday.`;
}
}
</script>
</body>
</html>
Q11f. Write a JavaScript program to calculate days left until next Christmas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Days Until Next Christmas</title>
</head>
<body>
<h1>Days Left Until Next Christmas</h1>
<button onclick="calculateDaysUntilChristmas()">Find days</button>
<div id="result"></div>

<script>
function calculateDaysUntilChristmas() {
const today = new Date();
let christmasThisYear = new Date(today.getFullYear(), 11, 25);
if (today > christmasThisYear) {
christmasThisYear = new Date(today.getFullYear() + 1, 11, 25);
}
const diffInMilliseconds = christmasThisYear - today;
const daysLeft = Math.ceil(diffInMilliseconds / (1000 * 60 * 60 * 24));
document.getElementById("result").innerHTML = `There are ${daysLeft} days
left until next Christmas.`;
}
</script>
</body>
</html>
Q11g. Write a JavaScript program to calculate days remains in your birthday.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Days Until Next Birthday</title>
</head>
<body>
<h1>Days Left Until My Next Birthday</h1>
<button onclick="calculateDays()">Find days</button>
<div id="result"></div>

<script>
function calculateDays() {
const today = new Date();
let birthdayThisYear = new Date(today.getFullYear(), 9, 16);
if (today > birthdayThisYear) {
birthdayThisYear = new Date(today.getFullYear() + 1, 11, 25);
}
const diffInMilliseconds = birthdayThisYear - today;
const daysLeft = Math.ceil(diffInMilliseconds / (1000 * 60 * 60 * 24));
document.getElementById("result").innerHTML = `There are ${daysLeft} days
left until my next Birthday.`;
}
</script>
</body>
</html>
/*
NAME : RACHNA KUMARI
SECTION : H
CLASS ROLL NUMBER : 50
UNIVERSITY ROLL NUMBER : 2019023
*/
Q12. Window object method setInterval, clearInterval
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. When the button is clicked SAVE LAP save the lap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stopwatch</title>
<style>
#stopwatch {
font-size: 2em;
text-align: center;
margin: 20px;
color:red;
}
#controls {
display: flex;
justify-content: center;
gap: 10px;
}

#laps {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body bgcolor="grey">
<h1 align="center">Stopwatch</h1>
<div id="stopwatch">00:00:00</div>
<div id="controls">
<button onclick="startStopwatch()">START</button>
<button onclick="pauseStopwatch()">PAUSE</button>
<button onclick="resetStopwatch()">RESET</button>
<button onclick="saveLap()">SAVE LAP</button>
</div>
<div id="laps"></div>

<script>
let intervalId = null;
let elapsedSeconds = 0;
function startStopwatch() {
if (intervalId === null) {
intervalId = setInterval(incrementTime, 1000);
}
}
function pauseStopwatch() {
if (intervalId !== null) {
clearInterval(intervalId);
intervalId = null;
}
}
function resetStopwatch() {
pauseStopwatch();
elapsedSeconds = 0;
updateDisplay();
}
function saveLap() {
const currentDisplay = document.getElementById("stopwatch").innerHTML;
const lapsDiv = document.getElementById("laps");
lapsDiv.innerHTML += `<div>Lap: ${currentDisplay}</div>`;
}
function incrementTime() {
elapsedSeconds += 1;
updateDisplay();
}
function updateDisplay() {
const hours = Math.floor(elapsedSeconds / 3600);
const minutes = Math.floor((elapsedSeconds % 3600) / 60);
const seconds = elapsedSeconds % 60;
const formattedTime = `${String(hours).padStart(2, '0')}:$
{String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
document.getElementById("stopwatch").innerHTML = formattedTime;
}
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy