0% found this document useful (0 votes)

355 views

HTML and Css Manual

The document provides examples of HTML code using headings, paragraphs, links, images, styling text color, adding a title, background color, connecting external and internal CSS, and using inline styles. It includes 13 questions with HTML code examples and expected outputs. The code examples demonstrate basic HTML elements and attributes as well as internal, external, and inline CSS styling.

Uploaded by

FS20IF015

Available Formats

Download as RTF, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

355 views

HTML and Css Manual

Uploaded by

FS20IF015

Available Formats

Download as RTF, PDF, TXT or read online on Scribd

You are on page 1/ 157

HTML

Q1 . Write first html code using hedings and paragraph.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

OUTPUT:

Q 2. Write a html program to connect a link

code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.com">Go to w3 school</a>

</body>
</html>

output:

Q3. write a html prgram to display an image

code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the img tag:</p>

<h2>image of saloni pawar</h2>

<img src="C:\Users\DELL\Desktop\sakhi.jpeg" alt="W3Schools.com" width="104"

height="142">

</body>

</html>

OUTPUT:
Q 4. Write a html program to change the colour of text

code:

<!DOCTYPE html>

<html>

<body>

<h2>The style Attribute</h2>

<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">SALONI SITARAM PAWAR.</p>

</body>

</html>

OUTPUT:
Q5. Write a program to give a title to the web page.

Code:

<!DOCTYPE html>

<html>

<head>

<title>SALONI</title>

</head>

<body>

<h2>HTML title </h2>

<h2>image of saloni pawar</h2>

</body>

</html>

Output:
Q6. Write a program to give a bacjground color to the web page

Code:

<!DOCTYPE html>

<html>

<h1>SALONI PAWAR</h1>

<p>This is a paragraph.</p>

</body>

</html>

OUTPUT:

Q7. Write a program to give backgrount colour to the heading and the paragraph

Code:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:powderblue;">Introduction to Animals</h1>

<p style="background-color:tomato;">Animals play an essential role in human life and planet

earth. Ever since an early time, humans have been using animals for their benefit. Earlier, they
came in use for transportation purposes. Further, they also come in use for food, hunting and
protection.

Animals are important because they help to keep the planet clean and healthy. They do this in a
number of ways, such as by eating plants and other animals (which helps to control the
population of those species), by spreading seeds through their droppings, and by aerating the
soil with their digging.

.</p>

</body>

</html>

OUTPUT:

Q8. Write a program to move the complete webpage to center.

Code:

<!DOCTYPE html>

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Lexend Deca' rel='stylesheet'>

</head>

<body>

<h2>How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy
text. This is more dummy text. This is more dummy text. This is more dummy text. This is more
dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This
is more dummy text.</p>
<h2>The Explanation</h2>

<p>Using either the universal selector or type selector <strong>body</strong> and the CSS text-
align property set to “center,” everything on the page will be centered.</p>

</body>

</html>

OUTPUT:

Q9.Write a program to chnage the font of the text

Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Our Products</h1>

<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">

This is demo text

</p>

</body>

</html>

OUTPUT:
Q10.Write a program to use blockquote

Code:

<!DOCTYPE html>

<html>

<body>

<p>Here is a quote from WWF's website:</p>

For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we collaborate
with people around the world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.

</blockquote>

</body>

</html>

OUTPUT:

Q11. Write a program to use external CSS

Code:
HTML

<ul>

<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>

<li><a href="#about"><i class="fa fa-book"> about</i></a></li>

<li><a href="#portfolio"><i class="fa fa-cog"> portfolio</i></a></li>

<li><a href="#services"><i class="fa fa-folder"> services</i></a></li>

<li><a href="#contact"><i class="fa fa-envelope"> contact</i></a></li>

</ul>

<h1>

Creative Agency</h1>

</section>

</div>

<h1>

About</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti
dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus
nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore
totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem
voluptatem?</p>

</section>

</div>

<h1>

Portfolio</h1>

<p>

</section>

</div>

<h1>

Services</h1>

<p>

</section>

</div>

<h1>

Contact</h1>

<p>

</section>

</div>

CSS:

margin: 0;

padding: 0;

body{

font-family: lato;

#box{

width: 100%;

height: 100vh;

scroll-behavior: smooth;

overflow-y: scroll;

#box div{

position: relative;

height: 100%;

.content {

position: absolute;

top: 50%;
left: 50%;

transform: translate(-50%,-50%);

text-align: center;

padding: 0 40px;

.content h1 {

font-size: 70px;

font-weight: bold;

color: #262626;

text-transform: uppercase;

margin-bottom: 40px;

#about .content h1,

#portfolio .content h1,

#services .content h1,

#contact .content h1{

color: #5b5b5b;

.content p {

line-height: 1.5;

margin: auto;

color: #000;

ul {

padding: 0;

text-align: center;
position: fixed;

margin: 2% auto;

z-index: 1;

width: 1100px;

left: 0;

right: 0;

font-family: lato;

ul li{

list-style: none;

display: inline-block;

ul li a {

display: block;

text-decoration: none;

height: 45px;

font-size: 20px;

background: #fff;

width: 200px;

color: #262626;

margin: 4px 0;

text-transform: uppercase;

line-height: 45px;

ul li a:hover{
background: deeppink;

text-decoration: none;

color: #fff;

#home{

background-image: url(1.jpg);

-webkit-background-size: cover;

background-size: cover;

background-position: center center;

#portfolio,

#contact

background: #f3f3f3;

OUTPUT:
Q12. Write a program to use inline css

Code:

class="paragraph-one"

style="color: darkmagenta; font-size: 2rem; text-align: center"

<a href="freecodecamp.org" style="text-decoration: none; color: crimson"

>freeCodeCamp</a

is one of the best platforms to learn how to code

</p>

Learning to code is free on freeCodeCamp, that's why they call it

freeCodeCamp

</p>

freeCodeCamp generates money through donations inorder to pay employees

and maintain servers.

</p>

If you're generous enough, consider joining others who have been

donating to freeCodeCamp

</p>

At freeCodeCamp, it's not all about typing on a code editor alone,

there's a forum like StackOverflow, where you can ask questions about

your coding problems and get answers from campers alike.

</p>

</article>

OUTPUT:

Q13. Write a program to use internal css

Code:

html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Internal CSS</title>

<style>

body{

background-color:#9F6;

h1{

color:#C39;
text-align:left;

text-transform:capitalize;

text-decoration:underline;

font-size:20px;

font-family:Verdana, Geneva, sans-serif;

background-color:#FFF;

color:#963;

h2{

color:#F03;

margin-left:10px;

img{

border:5px double #903;

width:400px;

height:300px;

margin-left:10px;

a:hover{ /---------------This is formate of Pseudo-element---------------/

color:#009;

font-size:18px;
font-weight:700;

</style>

</head>

<body>

<h1>Example for Internal CSS</h1>

<p>Cascading Style Sheet is a style language that defines layout of HTML documents.CSS
properties such as background, border, font, float, display, margin, opacity, padding, text-align,
vertical-align, position, color etc.</p>

<h2>Image Affected with styles</h2>

<img src="/images/p9.png"><br /><br />

<a href="/../../../Documents/Unnamed Site 2/p9.png" target="_blank">Download Image</a>

</body>

</html>

OUTPUT:
Q.13 Design a webpage using different tag formats. (bold , italic , emphasize , small , big ,
subscript , superscript , deleted , inserted text).

<html>

<head>

<title> Text Formatting </title>

</head>

<body>

<h1 align = center> Kancheepuram </h1>

<b> Kanchipuram is part of Tondaimandalam </b> <br> <i> Kanchipuram is 72 km away from
Chennai </i> <br>

<u> It is the administrative headquarters of Kancheepuram District. </u>

<br>

<b><i> Kanchipuram is well-connected by road and rail. </i> </b>

<p> Chennai <b> International Airport </b> is the nearest domestic and international
airport to the town, which is located at Tirusulam in Kanchipuram district. </p>

</body>

</html>

OUTPUT:

Q.14Design a webpage with links to different pages and allow navigation between webpages.

code:

<!Doctype Html>

<Html>

<Head>

<Title>
Make a Navigation Bar

</Title>

body

height: 125vh;

margin-top: 80px;

padding: 30px;

background-size: cover;

font-family: sans-serif;

header {

background-color: orange;

position: fixed;

left: 0;

right: 0;

top: 5px;

height: 30px;

display: flex;

align-items: center;

box-shadow: 0 0 25px 0 black;

header * {

display: inline;

header li {
margin: 20px;

header li a {

color: blue;

text-decoration: none;

</style>

</Head>

<Body>

<nav>

<ul>

<li>

<a href="#"> Home </a>

</li>

<li>

<a href="#"> About </a>

</li>

<li>

<a href="#"> Contact </a>

</li>

<li> <a href="#"> Terms of use </a>

</li>

<li>

<a href="#"> Join Us </a>

</li>
</ul>

</nav>

</header>

You are at JavaTpoint Site.....

</Body>

</Html>

OUTPUT:

Q 15.

<!DOCTYPE html>

<HTML>

<HEAD> <TITLE> DEMONSTRATION OF ORDERED AND UNORDERED LIST</TITLE></HEAD>

<BODY>

<H3>Grocery List</H3>

<OL>

<LI>Oils, Sauces, Salad Dressings, and Condiments.</LI>

<LI>Frozen Foods.</LI>

<LI>Pasta and Rice</LI>

</OL>

<H3>Grocery List</H3>
<UL>

<LI>Meat and Fish</LI>

<LI>Dairy and Eggs</LI>

</UL>

</BODY>

</HTML>

OUTPUT:

UNORDERD LIST :

CODE:

<HTML>

<HEAD> <TITLE> TYPES OF COMPUTER ON THE BASIS OF SPEED/SIZE.</TITLE></HEAD><BODY>

<H3>ON THE BASIS OF SIZE</H3>

<OL>

<LI>Super Computer</LI>
<LI>Mainframe</LI>

<LI>Mini Computer</LI>

<LI>Micro Computer</LI>

<UL>

<LI><H3>Social Media</H3></LI>

<LI>Facebook</LI>

<LI>WhatsApp</LI>

<LI>Instagram</LI>

</OL>

<LI><H3>NON-PORTABLE MICROCOMPUTER</LI>

<LI>Desktop</LI>

<LI>Workstation Computer</LI>

</OL>

</UL>

</OL>

</BODY>

</HTML>

OUTPUT:
Q.18 Design a webpage demonstrating all types of semantic.

CODE:

<html>

<head>

<style>

.all-browsers {

margin: 0;

padding: 5px;

background-color: mediumaquamarine;

.all-browsers > h1, .browser {

margin: 10px;

padding: 5px;
}

.browser {

background: thistle;

.browser > h2, p {

margin: 4px;

font-size: 90%;

</style>

</head>

<body>

<h1>SOCIAL MEDIA </h1>

</header>

<nav>

<summary><a href="https://www.instagram.com/accounts/login/"><h2>INSTAGRAM</h2></
a></summary>

<p>instagram is a free photo and video sharing app available on iPhone and Android. People
can upload photos or videos to our service and share them with their followers or with a select
group of friends. They can also view, comment and like posts shared by their friends on
Instagram.</p>

</article>

<article class="browser">
<summary><a href="https://web.whatsapp.com/"><h2>WHATSAPP</h2></a></summary>

<p>WhatsApp started as an alternative to SMS. Our product now supports sending and
receiving a variety of media: text, photos, videos, documents, and location, as well as voice
calls. Some of your most personal moments are shared with WhatsApp, which is why we built
end-to-end encryption into our app.</p>

</article>

<summary><a href="https://www.facebook.com/login.php/"><h2>FACEBOOK</h2></a></
summary>

<p>Facebook is a website which allows users, who sign-up for free profiles, to connect with
friends, work colleagues or people they don't know, online. It allows users to share pictures,
music, videos, and articles, as well as their own thoughts and opinions with however many
people they like.</p>

</article>

</nav>

</body>

<body>

<style>

aside {

width: 30%;

padding-left: 15px;

margin-left: 15px;

float: right;

font-style: italic;

background-color: lightgray;

</style>

</head>

<b><p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal special
events.</p></b>

</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was
amazing! I had a great summer together with my family!</p>

</article><br><br>

<center><button type="button" class="block"><a

href="file:///C:/Users/DELL/Downloads/homepage.html">MOVE TO LIST </a></button>

</footer>

</body>

</html>

OUTPUT:
Q 19: Design a webpage demonstrating image source file and with different link of social
media website.

CODE:
<!DOCTYPE html>

<html>

<style>

ul{list-style: none;}

ul{text-align: center;}

a:link,a:visited{

color: green;

background-color: transparent;

text-decoration: none;

text-align: center;

padding: 10px;

color: purple;

background-color:none;

text-decoration: none;

display: inline-block;}

a:hover{color: red;}

h3{text-align: center;}

</style>

</header>

<hr>

<u><h2 style="text-align: center;">INTRODUCTION</h2></u>

<h3>

<b>What is social media?

Social media is an internet-based form of communication. Social media platforms allow users to have conversations, share
information and create web content. There are many forms of social media, including blogs, micro-blogs, wikis, social
networking sites, photo-sharing sites, instant messaging, video-sharing sites, podcasts, widgets, virtual worlds, and more..</b>

</h3>

<hr>

<h2 style="text-align: center;">LOG IN </h2>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<hr>

<h1 style="text-align: center;">TOP SOLD MENU WITH PRICES</h1>

<table width="100%" style="border:2px solid black;">

<th style="border-collapse: collapse; border:2px solid black;"><h3><a href="">MILK PRODUCTS</a></h3>

<ul>

<li>BUTTER MILK</li>

<li>COFFE</li>

<li>LASSI</li>

</ul></th>

<th style="border-collapse: collapse; border:2px solid black;"><h3><a href="">MILK PRODUCTS</a></h3>

<ul>

<li>paneer </li>

<li>milkshakes</li>

<li>ice cream</li>

<li>milk sweet </li>

</ul></th>
</tr>

<th style="border-collapse: collapse; border:2px solid black;">

<h3><a href="">SUBJECT IN SCI</a></h3>

<ol>

<li>BIOLOGY </li>

<li>CHEMESTRY</li>

<li>PHYSICS</li>

</ol></th>

<th style="border border-collapse: collapse; border:2px solid black;"><h3><a href="desert.html">SUBJECTS IN SCI</a></h3>

<ol>

<li>MATHS</li>

<li>ENGLISH</li>

<li>COMPUTER SCI</li>

</ol></th></tr></table>

</table>

</body>

</html>

OUTPUT:

Q.20: Design a webpage demonstrating table layout.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>Fitness</title>

</head>

<div style="background-color:yellow; border: 1px solid black; width: 98.7%; height: 80px;"><center><h1>Devlope Your Workout</h1>

</div></header>

<div style=" background-color:pink; border: 1px solid black; width: 20%; height: 500px; float: left;"><h2>Advantages of workout</h2><br>

<h4>1.Boost Energy</h2><br><h4>2.promotes better sleep</h4><br><h4>3.increase lifespan</h4><br><h4>4.reduce body fats</h4>

</div>

<div style= "background-color:blue; border: 1px solid black; width: 90%; height: 80px; margin-top: 20px; margin-left: 5%;"><p>Regular
exercise keeps your muscles, bones and joints strong and functioning well, but also helps prevent falls and fractures. Try doing exercises that
strengthen your bones and muscles twice a week. Exercise burns calories and helps to maintain a healthy weight which in turn reduces your risk
of many health problems.</p></div>

</div>

<div style="background-color:red; border: 1px solid black; width: 98.7%; height: 80px; margin-top: 500px;"><center><button>
<h2>flexibility</h2> </button> <button><h2> strength<h2></button> <button><h2> weight</h2> </button> <button><h2>body
composition</h2></button></div>

</footer>

</body>

</html>

OUTPUT:

Q21: Design a webpage demonstrating table.

CODE:
<!DOCTYPE html>

<html>

<style>

table,th,td{

border:5px solid black;

</style>

<center><h1>STUDENT INFORMATION</h1>

<table width="100%" height="200">

<th>SURENAME</th>

<th>CONTACT</th>

</tr>

<td>Saloni</td>

<td>Pawar</td>

</tr>

<td>Aditi</td>

<td>Pawar</td>

</tr>

<td>Sayli</td>

<td>Polai</td>

</tr>

<td>Sanket</td>

<td>khamkar</td>

</tr>

OUTPUT:

Q.21.Design a web page demonstrating form.

CODE:
<div class="container">

<h1>HTML registration form with varification</h1>

<form name="registration" class="registartion-form" onsubmit="return formValidation()">

<table>

<tr>

<td><input type="text" name="name" id="name" placeholder="your name"></td>

</tr>

<tr>

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

<td><input type="text" name="email" id="email" placeholder="your email"></td>

</tr>

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

<td><input type="password" name="password" id="password"></td>

</tr>

<tr>

<td><label for="phoneNumber">Phone Number:</label></td>

<td><input type="number" name="phoneNumber" id="phoneNumber"></td>

</tr>

<tr>

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

<td>Male: <input type="radio" name="gender" value="male">

Female: <input type="radio" name="gender" value="female">

Other: <input type="radio" name="gender" value="other"></td>

</tr>

<tr>

<td><label for="language">language</label></td>

<td>

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

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

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

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

<option value="Hindi">Hindi</option>

<option value="Arabic">Arabic</option>

<option value="Russian">Russian</option>

</select>

</td>

</tr>

<tr>

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

<td><input type="number" name="zipcode" id="zipcode"></td>

</tr>

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

<td><textarea name="about" id="about" placeholder="Write about yourself..."></textarea></td>

</tr>

<tr>

<td colspan="2"><input type="submit" class="submit" value="Register" /></td>

</tr>

</table>

</form>

</div>

OUTPUT:

Q 22:Create a web page by using additional inputs in formhtml.(search , email , url ,

number ,range ,date ,time ,month ,colure ,week)

CODE:
<!DOCTYPE html>

<html>

<head>

<title>Registration Form For Job </title>

</head>

<body>

<h1>Registration Form For Job</h1>

</div>

<h2 class="name">Name </h2>

<input class="firstname" type="text" name="first_name"><br>

<label class="firstlabel">first name</label>

<input class="lastname" type="text" name="last_name"><br>

<label class="lastlabel">last name</label>

</div>

<h2 class="name"> Company </h2>

<input class="company" type="text" name="company">

<h2 class="name"> Email</h2>

<input class="email" type="email" name="email">

<h2 class="name"> Phone</h2>

<input class="Code" type="text" name="area_code">

<label class="area-code">Area Code</label>

<input class="number" type="text" name="phone">

<label class="phone-number">Phone Number</label>

<h2 class="name"> Search</h2>

<input class="DOB" type="date" name="DOB">

<h2 class="name">Range</h2>

<input class="Range" type="range" name="Range">

<h2 class="name">Suitable Time </h2>

<h2 class="name">Subject</h2>

<select class="option" name="subject">

<option disabled="disabled" selected="selected">--Choose option--</option>

<option>Subject 1</option>

<option>Subject 2</option>

<option>Subject 3</option>

</select>

<h2 id="coustomer">Are you beginner?</h2>

<input class="radio-one" type="radio" checked="checked" name="rdiobtn">

Yes

</label>

<input class="radio-two" type="radio" name="rdiobtn">

</label>

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

</form>

</div>

</body>

</html>

OUTPUT:
Q 23: Design a webpage demonstrating Audio.

CODE:
<!DOCTYPE html>

<html>

<head>

<body style= "background-color:grey;">

<center><h1 style ="color:red;">Sound</h1>

<audio width="100%" height="50%" controls>

<center><source src="audio.mp3" type="audio/mp3">

<source src="audio.ogg" type="audio/ogg">

</audio>

</body>

</head>

</html>

OUTPUT:
Q24:Design a webpage demonstrating Video

CODE:
<!DOCTYPE html>

<html>

<center><h1 style="color:solidblack;">Space</h1>

<center><video height="100%" width="50%" controls>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

</video>

</body>

</html>

OUTPUT:
Q 25:Design a webpage demonstrating YouTube.

CODE:<!DOCTYPE html>
<html>

<head>

<body style= "background-color:hotpink;">

<center><h1 style ="color:red;">youtube video</h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/OnnIOLTokvk" title="YouTube video player"

frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>

</iframe>

</body>

</head>

</html>

OUTPUT:
Q26: Design a webpage incorporating multimedia feature in HTML5.

CODE:
<!DOCTYPE html>

<html>

<head>

<style>

body{

background-image:url('universe.jpg');

background-repeat:no-repeat;

background-attachment:fixed;

background-size:cover;

</style>

</head>

<h1 style="color:Darkblue;"><center>Space</h1><br>

<h2><center> An Introduction To Space</h2>

<center><img height="500" width="900" src="http://planetary-science.org/wp-content/uploads/2014/09/Esa-space-exploration.jpg"></center>

<b><p>Space exploration is the ongoing discovery and exploration of celestial structures in outer space by means of continuously evolving and
growing space technology. While the study of space is carried out mainly by astronomers with telescopes, the physical exploration of space is
conducted both by unmanned robotic probes and human spaceflight.

While the observation of objects in space, known as astronomy, predates reliable recorded history, it was the development of large and
relatively efficient rockets during the early 20th century that allowed physical space exploration to become a reality. Common rationales for
exploring space include advancing scientific research, uniting different nations, ensuring the future survival of humanity and developing military
and strategic advantages against other countries.

Space exploration has often been used as a proxy competition for geopolitical rivalries such as the Cold War. The early era of space exploration
was driven by a “Space Race” between the Soviet Union and the United States, the launch of the first man-made object to orbit the Earth, the
USSR’s Sputnik 1, on 4 October 1957, and the first Moon landing by the American Apollo 11 craft on 20 July 1969 are often taken as landmarks
for this initial period. The Soviet space program achieved many of the first milestones, including the first living being in orbit in 1957, the first
human spaceflight (Yuri Gagarin aboard Vostok 1) in 1961, the first spacewalk (by Aleksei Leonov) on 18 March 1965, the first automatic landing
on another celestial body in 1966, and the launch of the first space station (Salyut 1) in 1971.

After the first 20 years of exploration, focus shifted from one-off flights to renewable hardware, such as the Space Shuttle program, and from
competition to cooperation as with the International Space Station (ISS).

With the substantial completion of the ISS following STS-133 in March 2011, plans for space exploration by the USA remain in flux. Constellation,
a Bush Administration program for a return to the Moon by 2020 was judged inadequately funded and unrealistic by an expert review panel
reporting in 2009. The Obama Administration proposed a revision of Constellation in 2010 to focus on the development of the capability for
crewed missions beyond low earth orbit (LEO), envisioning extending the operation of the ISS beyond 2020, transferring the development of
launch vehicles for human crews from NASA to the private sector, and developing technology to enable missions to beyond LEO, such as
Earth/Moon L1, the Moon, Earth/Sun L2, near-earth asteroids, and Phobos or Mars orbit. As of March 2011, the US Senate and House of
Representatives are still working towards a compromise NASA funding bill, which will probably terminate Constellation and fund development
of a heavy lift launch vehicle (HLLV).

In the 2000s, the People’s Republic of China initiated a successful manned spaceflight program, while the European Union, Japan, and India have
also planned future manned space missions. China, Russia, Japan, and India have advocated manned missions to the Moon during the 21st
century, while the European Union has advocated manned missions to both the Moon and Mars during the 21st century.

From the 1990s onwards, private interests began promoting space tourism and then private space exploration of the Moon (see Google Lunar X
Prize).</p>

<hr>

<h2><center>How Space Looks .....</h2>

<center><video width="620" height="420" controls>

<source src="desktop/space.mp4" type="video/mp4">

<source src="space.ogg" type="video/ogg">

</video><br>

<hr>

<h2>The beautiful Sound Of The Space</h2><center>

<source src="spaceaudio.ogg" type="audio/ogg">

<source src="spaceaudio.mp3" type="audio/mpeg">

</audio><br>

<img height="200" width="200"

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJ
x8fLT0tMTU3Ojo6Iys/
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
C1ddicXXieq8F9lQWZB81uE1qOYalB/
ovQc75So7H7rc1/8Wy5MpR23slcNt7XvW9wvhRXTgfDytbshzhufySI12ZxKfJWx3WiaXVQ7DstD5mtHKjS5fZu6nFUJs3ZGQGN357BVrnFziSdyj3F5txt
eVKIxwREXQREQEREBERAREQEREBERAREQEREGQSOCtjZnD1REwbW5TgOAsnKJ5RFzIceTkHyXkzuKwi6NZcTyVhYRHRERAREQEREBERAREQf/
2Q==">

<img height="200" width="200"

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJ
x8fLT0tMTU3Ojo6Iys/
RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//
AABEIAIEArAMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABQEDBAYHAgj/
xAA3EAABAwMCBAMGBQMFAQAAAAABAAIDBBEhBTEGEkFRImFxBxNCgaHBIzKRsdEUM3JDgqKy4ST/
xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EABsRAQEBAQEBAQEAAAAAAAAAAAABEQIxIRID/
9oADAMBAAIRAxEAPwDhyIiAiIgoiqqICIqgIKL3HG6R7WRtc57jYNaLkrfOEvZpqOrclTqbX0lKbEMt+JIPT4R658l1TR+D9M0SC1JTNjNsu3c71O6siWuF0
PB+uVdiKMxNOzpnBv03+ikxwBWgfi1LGnqGsJ+67XPSsYbW5fIbrBnhYPht6oONzcF1EYPLUX/2f+qKq9Araf4Q8eWF2epgYb/
ZQtZRNdfwXHoorj8kUkZtI0tPmvC6BqmkRvBuxahqGmvpnFwHh7II5ERAREQEREFUREBETogoiKqD1HG972sjaXOcQGtaLkk9AF3H2b+zRlA2LUtZibJX
Gz2ROy2D7F3n06d1ieyHgttPFHr+pxAzyNvSxuH9tp+P1PTsF1xsgDQAMDYBbkz7Wao2BkTbcwNuwWDVzhtw0C/
YLKme5wtex7BYhhzt9FnrpqcoyT3rr8oDb+WSsd1Od3ElTLoRuTf0VmSMAYCx+msQstNvgBRtXC0XWwzN7KOqIgd7JasjVauAG+FrupUIe03HTst3qYW
m4H1UPWQstaySpY5dqlCYpC5ox2UYt81ejDuawytMrYDDKe11pljIiICIiCqIiAnRE6IKLZ/
Z7oA4g4hihmYXUsP4s9tiBs35n6XWshd19j2jtoeHmVr2fi1jjJkfCMN+5+asHQ6WMRsAItYWDQMALLs621vuq0sRIyC49z0WW2NoNxe/
dKkYoiJGQnuC/
Dcedln8oG4uFVx8PgaFysdNRr6cMBv+qw5Yh3UjUeJp3UdNIGkAqfI1GJMywNlGVIJGFLSeIXGywpmeSGIKoj3UTVRXWxVMQF8qJqW2urErV9Qhu1
wIWm61S/
mNlv1Y3mvdaxq8N2nC6RitHIsbKiv1jOSYqwiCIiCqIiAnRE6IPUTDJKyNv5nEAfNfUvDtGKSipqWMAMgibGOgwAPsvmnhqP3vEWmRkXDquIH05gvpyj
cSzmOBvturETkJjYBu5x/dZ8dy27W56lxUZRENBf8Audys11S97PBYd0txZKuuBGXEA+SxnvLhysFrFWXteXgOcT6I5wAw443XC9Osi3O8saSTnqouZ/
PILAuPZSEh5iQ7JGfkvEMDS0m26423q5HaSSfUc/ncd/
krTwWtJd9FLGBoOwWDUtvcNHzK6881y6sQdVclRdQwuvvsp6WDra6wKhrWDuV0kYta3Vw8oNwtb1SMcpW11+b3Ws6mLgrbDQ9VZyvuO6j1Ma
wzdQ6AiIgqiIgJ0REEnwvJ7riTS39BVxf9gvpWklHKAThfLdLMaepimbvG8PHyN19HUdT75jHtPhkYHA+qW5CTa2aJ0ZLQSTfbyWUyQBgA6FQkErm8vK
SSN/JSUcnP63Xlv9HpnDMc+
+QfVUcBzDlyR1XhjbkYsCrnLa9lPtKNj5jd1yr1g1ptsMqjRkDdXGxki79rLpzyx10xJhzNtnOysSxtib+Jl3ZZ08gGGBRtY4Mbd5yV18c/
UTWy5IbgKFq3WuFn1s1zYKLmaCN0PEXVgvuoOvjFjdT9SMWvZQteMHqtRmtI11oax2FrxWwcRPsCO5steQEREFUREBETogBdt9nepNruG6XmdeSnB
hfnII2/42XEVuHs21saZrH9NO/lp6vwXOzX/CfnkfNB3SnIIwpOE4ChaGUEi/6KUjdz/lXn6/
m9E7SkcoAs0C5+iujFskuIusanADg+98WV9rw65J6Kzlm1lU8Qy99yALBeJpOfY4GwCsuqHOGDZvfurElQAMLowrNIGf5Efooitl5rgG56nsr1TM54PKM
d1hujMm+yer4jZmFxOL+aw3xdypWctYCNrbqIq6gHDB810nOOdusCr5W3UBqcga0qVrH4JJWqa3VtjYTfCI1LXp/
eVNh0UUrk8nvZXPPUq2ooiIgqiIgJ0REFFUGyKiDs3AHFA1eibT1L/wD7oGgPv/qN6O/lb9S1FyMr5k0+tqKCrjqaWR0c0Zu1w/
Y+S7PwlxbTazEM+7qmf3YSc+o7hSzVldFZNhrQcdVc9/4LKFgqwS511d/
qhZT8rqUfUANDQcdVae8HxONxbZYIm5tze2V7p+aplsPyg5Pmk501lRxmbIGB+gWJWTthG+FJVM0dPTcrem57rWamf3kpe7IGwK6YxurVRI6XL8BRd
RIG3V+qqbmwOFCV9WIwblBjanUgNdcrn3EFf72QxtPXKkuINZteOM3cey1N7i5xcTcndZV5REQEREFUREBERBRFVUQFdpqiSmmZNA90crDdr2GxBV
pEHR+HPaCDywax4H7Cdg8J/
wAh09VvNLq0NRGHxTMkjcLtcw3BXz+sqi1CroX89JUSRHqGuwfUbFB9AsrWlgAdupOmrWQxANIvbJXC6TjjUYbf1Ecco7jwn+PopNntAHLZ0EovvYg/
dalTHVtT1MOZytfhQdRXtHxLQJ+OGvHhjlPqB/KiqviuqlxCwN8ybppje6/
V4omEue0W81pGtcRGZzmU7r3+LoFAVNbUVTrzyud5XwrCmqq97nuLnEkncleURQEREBERBVERAREQCqIiAiIgIiICqERAVERAREQEREBERAREQf/Z">

<img height="200" width="200"

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJ
x8fLT0tMTU3Ojo6Iys/
RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//
AABEIAJAArgMBIgACEQEDEQH/xAAbAAEAAwEBAQEAAAAAAAAAAAAABAUGAwcCAf/
EADUQAAEDAwICCAUDBAMAAAAAAAEAAgMEERIFITFBBhMiMlFhcYEUFZGh4VLB8DNicrEjktH/
xAAZAQEAAwEBAAAAAAAAAAAAAAAAAQIDBAX/xAAiEQEBAQACAgMAAgMAAAAAAAAAAQIDERJBEyExcYEEIlH/2gAMAwEAAhEDEQA/
APD0REBERAREQEREBERAREQET3RAREQEREBERAREQEREBERAREQERSaOjfUvFgQ3xTscGsc44htyfBT6bSZprFxxHpur3TtIawDFm6v6bTLAbLK8k9L
TLL0+hQgDJpcfNWMeiwgW6loHotNFQgbEFSW0dmXO9+AG6r8lT4Mv8ohI3jb9Fwl0Omd3oW+wWy+F3AuL+AIXz8I5zdgL+BCj5KeDz6p6OR3Jic5v
3Cp6vTKimN3Nyb4tXqny+/
HYqHVaWNwbFTOU8HlSLXav0dD7viAZJ4jgVlaiCSnkMcrS1wW01KrZ05oiKUCIiAiIgIiICIvuGIyyBg58UEigo3VUgFjhzWy0zTgxgAbYLlotAxjG9jZayihjDR
dreHgs930viONHR4juXKsoqVwb/TO/gL2UyOCF4YHxDFpy2vY+6toGw3uIGnfmVj1Gv2qGUmWJbsDuLs/
2pUNEGDttJcf09kBXUToS7FlM0uBtYjZd+pyNzTw390+jqs8ae98Iy5oHZHIlfBp34hgDRbljxK04hF74RjLbYcPuvsQsYTaBhPjfio+kshLSvczIBoA4tFyVEdT
ML7OjmBJtfFbbqRc3pm7c8hv6KPNC69hAwN5dsXUf2T+GIqaAm9gCFmte0BlTTuNiHDuutwK9Nlpdt6dp8w4bqqraMbnqbe91pidKa/
h4RUwSU0zopRZzfuuS3vTDRDJCZ4Y7Sx3NhzHNYJdDEREQEREBFNFTS/
KHUvwTfizP1gq+sNwzG2GPDjvdQkBXWg0+T+scL3O3oqXibLWaPGGRsHkpiK1GmMYGt7GS0NNJTNaMmPuR48FnqFzGjtg4nmFawTtHajaADxJF1lr
XVbZ4+/1pKOenB7MMhA3ByCt211GI2QinjY4kFztsjZY+nqI7Yk2ANzk3YqdA6KaT/jgDnO/Tk0fhUvJrppOHMaptbStNsL2HaF7/
AGQ6xQRsDuqeWk2BsqXARlr+o6l17B97m/qu785C5jIXyhpvvGA63rzWd5K1nBmrL57S97qZPS4Xwdfp3btppHeWyqZxFBIx8lJUR82yAgG/
+ivyXUYZH4lskwPFxjb+6r56v5V/
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">

<img height="200" width="200"

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJ
x8fLT0tMTU3Ojo6Iys/
RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//
AABEIAH4AfgMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAAFBgMEAAECB//
EADcQAAIBAwIDBQcDBAEFAAAAAAECAwAEERIhBTFBBhMiUWFxgZGxwdHwMkKhFCNS4XIHFSQzU//
EABgBAAMBAQAAAAAAAAAAAAAAAAABAgME/8QAHREBAQEBAAIDAQAAAAAAAAAAAAECESExAxJBUf/
aAAwDAQACEQMRAD8A8QrYFZWVRMrKysoDK6ArFUscKMnyFXIbJmwZCFHkBkmg1ZVzUyRE9KaeB9lv62QB1cJndm93l7ac7XstwaCMCSzSRsBslm
+9HZDkteVJaMf212LRv8a9ih7Ndn5cZse6JO2iVht7yamk7AcOuI9VneGNjyWZQRn2j7UTWaLnUeKm2YftrgxEdK9K4z2IvbAapIA0fSRDqU+8UqXfCmj
J8J2500l/R6VyVq/
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">

<hr>

<h1>Visit Our Youtube </h1><center>

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/CHiljMMzy2E">

</iframe>

OUTPUT:
JAVASCRIPT
Q1:Design a webpage using JavaScript that print factorial number.

CODE:

<html>

<head>

<title>JavaScript program to find the Factorial of a given number</title>

</head>

<body>

<table>

<tr>

<td> <input type="text" name="a" id="first" placeholder="Enter a number"> </td>

</tr>

<tr>

<td> <button onclick="factorial ()" >Submit</button> </td>

</tr>
</table>

</body>

function factorial()

var n,i,fact = 1;

n = parseInt(document.getElementById ("first").value);

for(i = 1; i <= n; i++ )

fact = fact*i;

document.getElementById ("num").innerHTML = "Factorial of "+n+" is : "+ fact;

</script>

</html>

OUTPUT:

Q2:Design a webpage using JavaScript comparison operator.

CODE:
<html>

<body>
<h3>DataFlair: Comparison Operators</h3>

document.write("<b>Equal:</b></br>")

var var1 = '3';

document.write("var1 == 3 is " + (var1 == 3) + ", ");

document.write("3 == '3' is " + (3 == '3') + "</br>");

document.write("<b>Not Equal:</b></br>")

document.write("var1 != 3 is " + (var1 != 3) + "</br>");

document.write("<b>Strict Equal:</b></br>")

document.write("3 === '3' is " + (3 === '3') + "</br>");

document.write("<b>Strict Not Equal:</b></br>")

document.write("3 !== '3' is " + (3 !== '3') + "</br>");

document.write("<b>Greater than:</b></br>")

document.write("12 > 3 is " + (12 > 3) + ", ");

document.write("12 > '3' is " + (12 > '3') + "</br>");

document.write("<b>Greater than or Equal:</b></br>")

document.write("12 >= 3 is " + (12 >= 3) + ", ");

document.write("12 >= '12' is " + (12 >= '12') + "</br>");

document.write("<b>Less than:</b></br>")

document.write("3 < 12 is " + (3 < 12) + ", ");

document.write("3 < '12' is " + (3 < '12') + "</br>");

document.write("<b>Less than or Equal:</b></br>")

document.write("3 <= 12 is " + (3 <= 12) + ", ");

document.write("12 <= '12' is " + (12 <= '12') + "</br>");

</script>

</body>

</html>

OUTPUT:

Q3:Design a webpage using JavaScript increment and decrement operator.

CODE:

html:
<html>

<head>

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

</head>

<body>

<button id="decrement"> - </button>

<button id="reset">Reset</button><br><br>

</div>

</body>

</html>

CSS:
#increment, #decrement, #reset{

padding:10px 15px;

font-size:18px;

background: #56ccf2;

background: -webkit-linear-gradient(to right, #56ccf2, #2f80ed);

background: linear-gradient(to right, #56ccf2, #2f80ed);

color:#f1f1f1;

border:none;

margin:5px;

#main{

margin : 0 auto;

text-align:center;

padding:5% 10%;

#displayCounter{

font-size:100px;

font-family: impact;

JAVASCRIPT:

var productCounter={
count:0,

incrementCounter:function(){

if(this.count<10){

return this.count = this.count + 1;

}else{

alert("maximum limit reached, you can buy only 10 items");

return this.count;

decrementCounter:function(){

if (this.count>0){

return this.count = this.count - 1;

} else {

return this.count=0;

resetCounter:function(){

return this.count=0;

};

var displayCout = document.getElementById('displayCounter');

displayCout.innerHTML=0;

document.getElementById('increment').onclick=function(){
displayCout.innerHTML=productCounter.incrementCounter();

document.getElementById('decrement').onclick=function(){

displayCout.innerHTML = productCounter.decrementCounter();

document.getElementById('reset').onclick=function(){

displayCout.innerHTML = productCounter.resetCounter();

OUTPUT:

Q 4: Design a webpage using JavaScript Assignment operator.

CODE: <!DOCTYPE html>

<html>

<body>

<h1>JavaScript Assignments</h1>

<h2> Assignment Operator</h2>

<h3>The += Operator</h3>
<p id="demo"></p>

let x = 10;

x += 5;

document.getElementById("demo").innerHTML = "Value of x is: " + x;

</script>

<h3>The -= Operator</h3>

let y= 20;

y -= 5;

document.getElementById("sub").innerHTML = "Value of y is: " + y;

</script>

<h3>The *= Operator</h3>

let z = 150;

z *= 5;

document.getElementById("mul").innerHTML = "Value of z is: " + z;

</script>

<h3>The /= Operator</h3>

let a = 350;

a /= 10;

document.getElementById("div").innerHTML = "Value of a is: " + a;

</script>

<h3>The %= Operator</h3>

let b = 60;
b %= 10;

document.getElementById("mod").innerHTML = "Value of b is: " + b;

</script>

<h3>The **= Operator</h3>

let c = 25;

c **= 3;

document.getElementById("exp").innerHTML = "Value of c is: " + c;

</script>

</body>

</html>

OUTPUT:
Q5: Design a webpage using JavaScript Conditional operator

CODE:<!DOCTYPE html>
<head>

<form>

<body style="background-color: skyblue">

<h1><center>Check Your Result</center></h1>

<input type="name" name="name" placeholder="Enter Name" /><br><br>

<input type="name" name="name" placeholder="Year" /><br><br>

<label for="name">Collage</label>

<input type="name" name="name" placeholder="Collage Name" /><br><br>

</form>

</center>

<title>Conditional</title>

<form name="example" onsubmit="ViewOutput()">

<input type="text" id="marks" placeholder="Enter Marks" /><br><br>

<input type="submit" value="Submit" /></center>

</body>

</html>

OUTPUT:
Q6:Design a webpage using JavaScript bitwise

CODE:<!DOCTYPE html>
<html>

<body>

<h1>JavaScript Bitwise AND</h1>

<h2>The & Operator</h2>

document.getElementById("demo").innerHTML = 5 & 1;

</script>

<h2>The | Operator</h2>

document.getElementById("or").innerHTML = 5 | 1;

</script>

<h2>The ^ Operator</h2>

document.getElementById("XOR").innerHTML = 5 ^1;

</script>

<h2>The << Operator</h2>

document.getElementById("left").innerHTML = 5 <<1;

</script>

<h2>The >> Operator</h2>

document.getElementById("right").innerHTML = 5 >> 1;

</script>

<h2>The >>> Operator</h2>

document.getElementById("three").innerHTML = 5 & 1;

</script>

</body>

</html>

OUTPUT:
Q7: Design a webpage using JavaScript TypeOf operator.

CODE:<!DOCTYPE html>
<html>

<body style="text-align:center; ">

<h1>JavaScript Operators</h1>

<h2>The typeof Operator</h2>

document.getElementById("typeof").innerHTML =

"Saloni=" + typeof "Saloni" + "<br>" +

"2.00 = " + typeof 2.00 + "<br>" +

"NaN =" + typeof NaN + "<br>" +

"false = " + typeof false + "<br>" +

"[1, 2, 3, 4] =" + typeof [1, 2, 3, 4] + "<br>" +

"{name:'saloni', age:18} = " + typeof {name:'saloni', age:18} + "<br>" +

"new Date() =" + typeof new Date() + "<br>" +

"function () {} ==" + typeof function () {} + "<br>" +

"mySchool == " + typeof mySchool + "<br>" +

"null ==" + typeof null;

</script>

</body>

</html>

OUTPUT:

Q8:Design a webpage using JavaScript short circuit evaluation.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Short Circuit</title>

<style>

body {

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

text-align: center;

background-color: grey;

.result {

font-size: 20px;

font-weight: 500;

color: blueviolet;

</style>

</head>

<body>

<h1>Short-circuit evaluation</h1>

<br />

<button class="Btn">&& short circuit evaluation</button>

<button class="Btn">|| short circuit evaluation</button>

let resEle = document.querySelector(".result");

let BtnEle = document.querySelectorAll(".Btn");

function retTrue() {

resEle.innerHTML += "True <br>";

return true;

}
function retFalse() {

resEle.innerHTML += "False <br>";

return false;

BtnEle[0].addEventListener("click", () => {

resEle.innerHTML = "&& evaluation<br>";

retFalse() && retTrue();

});

BtnEle[1].addEventListener("click", () => {

resEle.innerHTML = "|| evaluation <br>";

retTrue() || retFalse();

});

</script>

</body>

</html>

OUTPUT:

Q9:Design a webpage using JavaScript using comma.

CODE:

<!DOCTYPE html>

<html>

<head>

background-color: grey;

text-align: center;

</style>

<body >

<h1>The Comma Operator</h1>

<h2>Print My Full Name</h2>

function x() {

document.write('Saloni');

return 'Saloni';

function y() {

document.write('Sitaram');

return 'Sitaram';

function z() {

document.write('Pawar');

return 'Pawar';

var x = (x(),y(), z());

document.write(x);

</script>

</body>

</head>

</html>

OUTPUT:
Q10:Design a webpage using JavaScript delete.

CODE:
<!DOCTYPE html>

<html>

<head>

body{

background-color: skyblue;

text-align: center;

</style>

<body>

<h1>Delete Operator</h1>

<h2>Delete habbit </h2>

const person = {

name:"Saloni Pawar",

age:18,

Habbit:"Playing"

};

delete person.Habbit;

document.getElementById("delete").innerHTML =

person.name + " is " + person.Habbit + "is her habbit.";

</script>

</center>

</body>

</head>

</html>

OUTPUT:

Q11: Design a webpage using JavaScript using this keyword.

CODE:
<!DOCTYPE html>

<html>

<head>

body{

background-color: hotpink;

text-align: center;

</style>

<body>

<h1>This in Javascript</h1>

<button onclick="this.style.display='none'">Button</button>

</body>

</html>

OUTPUT:
Q12:Design a webpage using JavaScript using unary.

CODE:
<!DOCTYPE html>

<html>

<head>

</head>

<body>

const x = 350;

const y = -350;

document.write(+x);

document.write("<br>");

document.write(+y);

document.write("<br>");

document.write(+'');

document.write("<br>");

document.write(+true);

document.write("<br>");

document.write(+false);

document.write("<br>");

document.write(+'saloni');

document.write("<br>");

</script>

</body>

OUTPUT:
Q12:Design a webpage using JavaScript while

CODE:
<!DOCTYPE html>

<html>

<head>

<body>

"use strict";

let i = 0;

while (i < 3) {

alert( i );

i++;

</script>

</body>

</head>

</html>

OUTPUT:
Q13:Design a webpage using JavaScript do while

CODE:
<!DOCTYPE html>

<!DOCTYPE html>

<html>

<head>

<title>do while</title>

</head>

<body>

"use strict";

let i = 0;

do {

alert( i );

i++;

} while (i < 3);

</script>

</body>

</html>

OUTPUT:
Q14: Design a web page using JavaScript for loop statement .

CODE:
<!DOCTYPE html>

<html>

<head>

<body>

<script type="text/javascript" charset="utf-8">

var x;

for (x = 2; x <= 4; x++)

document.write("Value of x:" + x);

</script>

</body>

</head>

</html>

OUTPUT:

Q15. Design a webpage using JavaScript if conditional statement.

CODE:
<!DOCTYPE html>

<head>

<form>

<body style="background-color: skyblue">

<h1><center>Check Your Result</center></h1>

<input type="name" name="name" placeholder="Enter Name" /><br><br>

<input type="name" name="name" placeholder="Year" /><br><br>

<label for="name">Collage</label>

<input type="name" name="name" placeholder="Collage Name" /><br><br>

</form>

</center>

<title>Conditional</title>

<form name="example" onsubmit="ViewOutput()">

<input type="text" id="marks" placeholder="Enter Marks" /><br><br>

<input type="submit" value="Submit" /></center>

</body>

</html>

OUTPUT:
Q16. Design a webpage using JavaScript if else conditional statement.

CODE:<!DOCTYPE html>
<html>

<body style="text-align:center; ">

<script type = "text/javaScript">

const number = prompt("Enter a number: ");

if (number > 0) {

document.write("The number is positive");

else {

document.write("The number is either a negative number or 0");

document.write("The if...else statement is easy");

</script>

</body>
</html>

OUTPUT:

17. Design a webpage using JavaScript switch statement.

CODE:
OUTPUT:

18. Design a webpage using JavaScript program to display all the prime number from 1 to
100.

CODE:<!DOCTYPE html>
<html>

<head>

</head>

<style>

body

text-align: center;

background-image:url(math.jpg);

background-repeat: no-repeat;

background-size: cover;

padding: 5px;

height: 450px;
}

</style>

let startNum = prompt("Enter Start Number");

let endNum =prompt("Enter End Number");

function isPrime( n)

if(n == 1 || n == 0) return false;

for(var i = 2; i < n; i++)

if(n % i == 0) return false;

return true;

var N = 100;

for(var i = 1; i <= N; i++)

if(isPrime(i)) {

document.write( i +"<br>");

</script>

</head>

<style>

body

text-align: center;

background-image:url(math.jpg);

background-repeat: no-repeat;

background-size: cover;

padding: 5px;
height: 450px;

</style>

</html>

OUTPUT:
19. Design a webpage using JavaScript to accept the number from user and display sum of
its digit.

CODE:
<!Doctype html>

<html>

<head>

function sumOfDigits()

{
var n, remainder, sum = 0;

n = parseInt(document.getElementById("number").value);

while(n)

remainder = n % 10;

sum = sum + remainder;

n = Math.floor(n/10);

document.getElementById("sum").value = sum;

</script>

</head>

<style>

body

text-align: center;

background-image:url("1.jpg");

background-repeat: no-repeat;

background-size: cover;

padding: 5px;

height: 450px;

background-color: grey;

</style>

<h1>The Sum Of Numbers </h1><br />

<p>Enter the Number: <input id="number"></p>

<button onClick= "sumOfDigits()">Sum of digits</button>

<p>Sum = <input id="sum"></p>

</body>

</html>

OUTPUT:
Q20. Design a webpage using JavaScript Break.

CODE:<!DOCTYPE html>
<html>

<head>

</head>

<body>

const food = "sushi";

switch (food) {

case "Saloni":

document.write("Sushi is originally from INDIA.");

break;

case "pizza":

document.write("Pizza is originally from Italy.");

break;

default:

document.write("I have never heard of that dish.");

break;
}

</script>

</body>

OUTPUT:

Q21. Design a webpage using JavaScript Continue.

CODE:<!DOCTYPE html>
<!DOCTYPE html>

<html>

<head>

<title>Continue</title>

</head>

<body>

"use strict";

for (let i = 0; i < 10; i++) {

if (i % 2 == 0) continue;

alert(i);

</script>

</body>

</html>

OUTPUT:
Q22.Design a webpage using JavaScript to accept sentence from user and display the number
of words.

CODE:
<!DOCTYPE html>

<!DOCTYPE html>

<html>

<head>

</head>

<body style="text-align: center;" "background-color: blue">

<h1 style="color: green">

Word Count Return

</h1>

<p>

Type in the textbox and click on

the button to count the words

</p>

<textarea id=+prompt ("inputField") rows=10 cols="60">

</textarea>

Count Words

</button>

<p> Word Count:

</p>

function countWords() {

var text = document

.getElementById("inputField").value;

var numWords = 0;

for (var i = 0; i < text.length; i++) {

var currentCharacter = text[i];

if (currentCharacter == " ") {

numWords += 1;

document.getElementById("show")

.innerHTML = numWords;

}
</script>

</body>

</html>

OUTPUT:

Q23 Design a webpage using JavaScript to find the square root.

CODE:
<!DOCTYPE html>

<html>

<head>

function doMath(){

var inputNum1=document.form1.input1.value;
var result = Math.sqrt(inputNum1);

document.form1.answer.value = result;

</script>

</head>

body

text-align: center;

background-image:url('square.jpg');

background-repeat: no-repeat;

background-size: cover;

padding: 5px;

height: 450px;

background-color: #DEB887;

</style>

<h1>Find Square Root</h1>

Enter Number:

<input type="text" name="input1" size=10>

<input type="button" value="Calculate" onClick='doMath()'>

<br />

The square root is:

<input type="text" name="answer" size=20>

</form>

</body>

</html>

OUTPUT:
Q24. Design a webpage using JavaScript to convert Celsius to Fahrenheit.

CODE:
<!DOCTYPE html>

<!DOCTYPE html>

<html>

<head>

<title>celcious </title>

</head>

body

text-align: center;

background-image:url();

background-repeat: no-repeat;

background-size: cover;

padding: 5px;

height: 450px;

</style>

<h1 style="color: red">Convert Celcious to Fara</h1>

<p>JavaScript is a powerful and versatile programming language that can be used to create a wide range of applications and
websites. In this tutorial, we will learn how to write a JavaScript program to convert Celsius to Fahrenheit. We will use a simple
formula to perform the conversion, and the program will prompt the user to input a value in Celsius and then display the
equivalent temperature in Fahrenheit.

This program can be useful for anyone who needs to quickly and easily convert temperatures from one unit of measurement to
another. We also have an interactive JavaScript course where you can learn JavaScript from basics to advanced and get certified.
Check out the course and learn more from here.

</p>

<hr>

<h2 style="color: red">Try It Yourself</h2>

<div class="row my-5 py-5">

<div class="col-4 offset-4">

<label for="">Enter the temperature below</label><br /><br />

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

</div><br /><br />

<input type="submit" id="submit" class="btn btn-success">

</div><br /><br />

</div>

<div class="row my-3 py-3">

<div class="col-4 offset-4">

<label for="">Temperature in Fahrenheit</label><br /><br />

<input type="text" id="Faht" class="form-control" readonly>

</div><br /><br />

</div>

<hr>

let Fahrenheit = document.getElementById('Faht')

let submit = document.getElementById('submit')

submit.addEventListener('click', (e)=>{

let Celsius = document.getElementById('temp').value

e.preventDefault()

result(Celsius)

})

const result = (cel) =>{

Fahrenheit.value = (9 * cel + 160 ) / 5

</script>

</body>

</html>

OUTPUT:

Q25. Design a webpage using JavaScript to reverse the string.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>

Reverse a String in JavaScript

</title>

<style>

.results {

border : green 1px solid;

background-color : aliceblue;

text-align : left;

padding-left : 20px;

height : 150px;

width : 95%;

.resultText {

font-size : 20px;

font-style : normal;

color : blue;

</style>

</head>

<body>

<div class = "results">

<h2> Enter the Text </h2>

Input: <input type = "text" name = "inputText" id = "inputText" required>

<button type = "button" onclick = "reverseString()" > Submit </button>

<div class = "resultText">

<p id = "reveserStringResult"> </p>

<p id = "result"> </p>

</div>

<script type = "text/javascript">

function reverseString() {

input = document.getElementById("inputText").value;
if(input == '') {

document.getElementById("reveserStringResult").innerHTML = '';

document.getElementById("result").style.color = "red";

document.getElementById("result").innerHTML = "Please Enter a Valid Text ";

return;

let reverseResult = "";

document.getElementById("result").innerHTML = '';

for ( var i = input.length -1; i >= 0; i--) {

reverseResult = reverseResult + input[i];

document.getElementById("result").style.color = "blue";

document.getElementById("reveserStringResult").innerHTML = "Reversed String: " + reverseResult;

</script>

OUTPUT:

Q26 Design a webpage using JavaScript to display current date and time.

CODE:
<!DOCTYPE html>

<html>

body
{

text-align: center;

background-image:url(https://images.pexels.com/photos/359989/pexels-photo-359989.jpeg?
cs=srgb&dl=pexels-aphiwat-chuangchoem-359989.jpg&fm=jpg);

background-repeat: no-repeat;

background-size: cover;

padding: 5px;

height: 450px;

</style>

<h1 style="color: red">Display Current Date And Time</h1>

<h1> Current Date</h1>

var date = new Date();

var current_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();

var current_time = date.getHours()+":"+date.getMinutes()+":"+ date.getSeconds();

var date_time = current_date+"<br /> "+current_time;

document.getElementById("p1").innerHTML = date_time;

</script>

</body>

</html>

OUTPUT:
Q27: Design a webpage using JavaScript using composite data types.

CODE:
<html>

<head>

<title>Javascript objects</title>

</head>

let person=new Object();

person.firstname="SALONI";

person.lastname="PAWAR";

person.age=18;

person.haircolour="Black";
for (i in person){

document.write(i + ": " + person[i] + "<br />");

</script>

</body>

</html>

OUTPUT:

Q28: Design a webpage using JavaScript to escape sequence character and string method
invoked in.

CODE:
<!DOCTYPE html>

<html>

<h1>SALONI PAWAR</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

let text = "The character \\ is called backslash.";

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

OUTPUT:
Q 29:. Design a webpage using JavaScript to demonstrate Boolean data types.

CODE:

OUTPUT:
Q.30:. Design a webpage using JavaScript data object method.

CODE:
<script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

</script>

<h1 style="color: green">

SALONI PAWAR

</h1>

</p>

Click Here

</button>

</p>

var el_up = document.getElementById("GFG_UP");

var el_down = document.getElementById("GFG_DOWN");

el_up.innerHTML = "Click on the button to get "

+ "the all methods of any Object.";

function Obj() {

this.m1 = function M1() {

return "From M1";

}

this.m2 = function M2() {

return "From M2";

function getAllMethods(obj = this) {

return Object.keys(obj)

.filter((key) => typeof obj[key] === 'function')

.map((key) => obj[key]);

function gfg_Run() {

el_down.innerHTML = getAllMethods(new Obj());

</script>

</body>

OUTPUT:

Q.31. Design a webpage using JavaScript math object.

CODE:
<html>

<head>
<title>Lottery Game</title>

<style>

body {

text-align: center;

div {

border: 2px dotted black;

background: wheat;

height: 500px;

width: 600px;

display: inline-block;

h2 {

padding: 10px;

text-align: center;

font-family: 'Courier New', Courier, monospace

</style>

</head>

<body>

<h2>Welcome to lottery</h2>

<p>Enter your lottery number</p>

<input type="text" name="Maximum lottery" id="lottery">

<button class="btn">Check!</button>

</div>

</body>

var lotteryNo = document.querySelector('#lottery');

var btn = document.querySelector('.btn');

var range = 10;

var winningTicket = Math.floor(Math.random() * 10);

btn.addEventListener('click', () => {

console.log(lotteryNo.value, winningTicket);

if (winningTicket == lotteryNo.value)

alert('Congrats! You win the lottery');

else

alert('Sorry you lost. Better luck next time!')

})

</script>

</html>

OUTPUT:
Q32. Design a webpage using JavaScript array.

CODE:
<!DOCTYPE html>

<html>

<head>

<title> Array </title>

body{

background-color: transparent;
background-color: pink;

</style>

</head>

<body>

<center><table id="table" border="5" style="width: 100%" ></center>

<tr style="background-color: white">

<th>First Name</th>

</tr>

<tr style="background-color: red" >

</tr>

<tr style="background-color: green">

</tr>

<tr style="background-color: grey">

</tr>

<tr style="background-color: olive">

</tr>
<tr style="background-color: pink">

</tr>

ARRAY<br />

</table>

var array = [["Saloni","Pawar","18"],

["Sitaram","Pawar","42"],

["Aditi","Pawar","22"],

["Amey ","Pawar","15"],

["Surekha","pawar","40"],

["priya","morajkar","18"],

["A2","B2","C2"],

["A3","B3","C3"],

["A4","B4","C4"],

["A5","B5","C5"]],

table = document.getElementById("table");

for(var i = 1; i < table.rows.length; i++)

for(var j = 0; j < table.rows[i].cells.length; j++)

table.rows[i].cells[j].innerHTML = array[i - 1][j];

</script>

</body>

</html>
OUTPUT:

Q33. Design a webpage using JavaScript regular expression (regExp).

CODE:
<!DOCTYPE html>

<html>

<head>

function ValidateEmail(inputText)

var mailformat = /^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/;

if(inputText.value.match(mailformat))

alert("Valid email address!");

return true;

else

alert("Invalid email address!");

return false;

</script>

background-image:url("");

</style>

</head>

<body>

<center><h1>Check For Email</h1></center>

<center><form name="form1" action="#">

<input type='text' name='text1'/>

<input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)"/>

</form></center>

</body>

</html>

OUTPUT:
Q34. Design a webpage using JavaScript Document and associated object(Method).

CODE:
<!DOCTYPE html>

<html>

<h2>Saloni Pawar</h2>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

OUTPUT:
Q35. Design a webpage using JavaScript Document and associated object(properties).

CODE:
<!doctype html>

<head>

<style>

body{

background-color:brown;

</style>

<title>Document Properties</title>

</head>

<body>

<h3>Document Properties Example</h3>

document.write(document.domain +"<br>")

document.write(document.lastModified +"<br>")

document.write(document.documentMode +"<br>")

document.write(document.title +"<br>")

document.write(document.url +"<br>")

</script>

</body>
</html>

OUTPUT:

Q36. Design a webpage using JavaScriptonafterprint.

CODE:
<html>

<head>

function print_webpage()

var printContent = document.getElementsByTagName('body')[0];

var WinPrint = window.open('', '', 'width=700,height=650');

WinPrint.document.write(printContent.innerHTML);

WinPrint.document.close();

WinPrint.focus();

WinPrint.print();

WinPrint.close();

function print_div()

var printContent = document.getElementById('print_div');

var WinPrint = window.open('', '', 'width=700,height=650');

WinPrint.document.write(printContent.innerHTML);

WinPrint.document.close();

WinPrint.focus();

WinPrint.print();

WinPrint.close();

</script>

</head>

<body>

<h1>Print Webpage Using JavaScript</h1>

<input type="button" class="print_button" value="Print Webpage" onclick="print_webpage();">

<input type="button" class="print_button" value="Print Div Only" onclick="print_div();">

<p>

Some sample content and this is a demo to print webpage using javascript

</p>

</div>

</body>

</html>

OUTPUT:
Q37. Design a webpage using JavaScriptonbeforprint.

CODE:
<!DOCTYPE html>

<html>

<body>

SALONI PAWAR

</h1>

<p>Try to print this page you will see a alert</p>

document.getElementsByTagName("BODY")[0].onbeforeprint = function() {
myFunction()

};

function myFunction() {

alert("You are going to print this page");

</script>

</center>

</body>

</html>

OUTPUT:

Q38. Design a webpage using JavaScript onload.

CODE:
<html>
<head>

<script type = "text/javascript">

var img = null;

function init(){

img = document.getElementById('myimg');

img.style.position = 'relative';

img.style.left = '50px';

function moveRight(){

img.style.left = parseInt(

img.style.left) + 100 + 'px';

window.onload = init;

</script>

</head>

<body>

<form>

<img id = "myimg" src = "train1.png" />

<p>Click the below button to move the image right</p>

<input type = "button" value = "Click Me" onclick = "moveRight();" />

</center>

</form>

</body>

</html>

OUTPUT:
Q39. Design a webpage using JavaScriptonerror.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>onerror event attribute</title>

<style>
body {

text-align:center;

background-color:grey;

h1 {

color:green;

</style>

</head>

<body>

<img src="image.gif" onerror="myFunction()">

<h1>SALONI PAWAR</h1>

<h2>onerror event attribute</h2>

function myFunction() {

alert("The image could not be loaded.");

</script>

</body>

</html>

OUTPUT:

Q40. Design a webpage using JavaScriptonhaschange.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>Onchange</title>

</head>

<body style="background-color: grey">

<h1>Select any fruits from this: </h1>

<img src="watermelon.jpg" height="300" width="200">

<img src="apple.jpg" height="300" width="200">

<img src="guava.jpg" height="300" width="200">

<img src="pine.jpg" height="300" width="200"><br/>

<br><select id="Choose" onchange="Func_a()">

<option value="watermelon">Watermelon

<option value="Apple">Apple

<option value="Guava">Guava

<option value="Pineapple">Pineapple

</select>

<p>Get one of the fruits to consume and then digest it.</p>

function Func_a() {

varx_ip = document.getElementById("Choose").value;

document.getElementById("demo1").innerHTML = "Select from the given fruit list " + x_ip;

</script>

</body>

</html>

OUTPUT:
Q42. Design a webpage using JavaScriptonofffline and ononline.

CODE:
<script type="text/javascript">

Offline.options = {

checkOnLoad: false, interceptRequests: true,

reconnect: { initialDelay: 3,

delay: 10

requests: true

};

</script>

OUTPUT:
Q43. Design a webpage using JavaScriptonbort.

CODE:
<!DOCTYPE html>

<html>

<body>

function abortFunc() {

alert('Error- Loading of the image aborted');

</script>

<img src="/videotutorials/images/tutor_connect_home.jpg" onabort = "abortFunc()">

</body>

</html>

OUTPUT:
Q44. Design a webpage using JavaScriptonblur.

CODE:
<!DOCTYPE html>

<html>

<head>

<meta charset = "UTF-8">

<title>

JavaScript onblur Event

</title>

<style>

.body-data {

border : #81D4FA 2px solid;

background-color : #03a9f400;

text-align : left;

padding-left : 20px;

padding-bottom: 20px;

height : auto;

width : auto;

.resultText {

margin: 0 0 3px 0;

padding: 0px;

display: block;

font-weight: bold;
}

.heading {

font-weight: bold;

border-bottom: 2px solid #ddd;

font-size: 15px;

width: 98%;

</style>

</head>

<body>

<div class = "body-data" >

<div class = "heading" >

<h2> JavaScript onblur Event </h2>

<span> Click in the textbox then click outside to trigger the event </span>

</div>

<div class = "resultText" >

</br>

<p> Using HTML: attaching event on element directly </p>

<input type = "text" id = "myText" onblur = "fireEvent()" >

<p id = "result1" > Default Text </p>

</div>

<script type = "text/javascript">

// This function will be called whenever onblur event occurs

function fireEvent( ) {

document.getElementById( "myText" ).style.backgroundColor = '#81D4FA';

document.getElementById("result1").innerHTML = " Input field lost focus ";

</script>

</body>
</html>

OUTPUT:

Q45. Design a webpage using JavaScriptondragdrop.

CODE:

<!DOCTYPE HTML>

<html>

<head>

<title>HTML DOM ondrop Event</title>

<style>

.droptarget {

float: center;

width: 300px;

height: 50px;

margin: 20px;

padding: 5px;

border: 6px solid black;

}

body{

background-color: red;

</style>

</head>

<body>

Drag the first element .......

</h1>

<div class="droptarget"

ondrop="dropEle(event)"

ondragover="allowDropEle(event)">

<p ondragstart="dragStartEle(event)"

draggable="true"

id="dragtarget">

Draggable element

</p>

</div>
<div class="droptarget"

ondrop="dropEle(event)"

ondragover="allowDropEle(event)">

</div>

function dragStartEle(event) {

event.dataTransfer.setData(

"Text", event.target.id);

document.getElementById(

"demo").innerHTML = "Dragging starts";

function allowDropEle(event) {

event.preventDefault();

function dropEle(event) {

event.preventDefault();

var data =

event.dataTransfer.getData("Text");
event.target.appendChild(

document.getElementById(data));

document.getElementById("demo").innerHTML =

"Element dropped";

</script>

</center>

</body>

</html>

OUTPUT

Q46. Design a webpage using JavaScriptonfocus.

CODE:
<!DOCTYPE html>
<html>

<body>

<p>Sample for onfocus event handler</p>

User Name: <input type="text" id="fname" onfocus="func(this.id)"><br>

Confirm user name: <input type="text" id="lname" onfocus="func(this.id)">

function func(x) {

document.getElementById(x).style.background = "red";

</script>

</body>

</html>

OUTPUT:

Q47. Design a webpage using JavaScriptonkeydown.

CODE:
<!doctype html>

<html>

<head><title>onkeydown event demo</title>

</head>

<body>

<h3>Sample onkeydown event handler</h3>

<p>A message will popup when any key is pressed. . .</p>

<input onkeydown="javascript:alert('You have pressed a key! ! !');"/>

</body>

</html>

OUTPUT:

Q49. Design a webpage using JavaScriptonkeypress.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>

DOM onkeypress event

</title>

</head>

SALONI PAWAR

</h1>

<p>Press any key inside

the input field</p>

<input type="text"

id="inputField"
style="background-color:green">

document.getElementById(

"inputField").addEventListener("keypress", GFGFun);

function GFGFun() {

document.getElementById(

"inputField").style.backgroundColor =

"yellow";

</script>

</center>

</body>

</html>

OUTPUT:
Q50. Design a webpage using JavaScriptonmousedown and onmouseup.

CODE:
<!DOCTYPE html>

<head>

<title>Onmouse over and out</title>

<style>

.parent{

width: 100%;

height: 200px;

display: flex;

justify-content: space-between;

.chlid1{

width: 45%;

height: 200px;

}
.chlid2{

width: 45%;

height: 200px;

</style>

</head>

<body style="background-color: black;">

<img src="pic1.webp" id="img1" onmouseover="change1()" onmouseout="change2()" width="100%">

</div>

<img src="pic3.webp" id="img2" onmouseover="change3()" onmouseout="change4()" width="100%">

</div>

</div>
<script>

// Boy pic

function change1()

document.getElementById("img1").src = "pic2.webp"

function change2()

document.getElementById("img1").src = "pic1.webp"

// girl pic

function change3()

document.getElementById("img2").src = "pic4.webp"

function change4()

document.getElementById("img2").src = "pic3.webp"

}
</script>

</body>

</html>

OUTPUT:
Q51. Design a webpage using JavaScriptonmousemove&onmouseout.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>

Difference between mouseover,

mouseenter and mousemove events

</title>

<style>

body {

text-align: center;

h1 {
color: green;

div {

margin: 15px 50px 0px 50px;

border: 2px solid black;

padding: 10px;

text-align: center;

background-color: #2ec96c;

color: white;

h3 {

background-color: white;

border-radius: 10px;

</style>

function over(e) {

document.getElementById("sover").innerHTML++;

function enter(e) {

document.getElementById("senter").innerHTML++;

function move(e) {
document.getElementById("smove").innerHTML++;

</script>

</head>

<body>

<h1>Created by Saloni</h1>

<h4>Mouseover, Mouseenter and Mousemove Example</h4>

<div class="over" onmouseover="over(this)">

<h3>Mouseover event triggered:

times

</h3>

<p>

This event occurs every time when the mouse pointer

enters the div element or its child elements

(here <h3> or <p>).

</p>

</div>

<div class="enter" onmouseenter="enter(this)">

<h3>Mouseenter event triggered:

times

</h3>

<p>

This event occurs only when the mouse pointer enters

the div element.

</p>

</div>
<div class="move" onmousemove="move(this)">

<h3>Mousemove event triggered:

times

</h3>

<p>

This event occurs every time the mouse pointer is

moved over the div element.

</p>

</div>

</body>

</html>

OUTPUT:

Q53. Design a webpage using JavaScriptonresize.

CODE:
<!DOCTYPE html>
<html>

<head>

var i = 0;

function fun() {

var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;

document.getElementById("para").innerHTML = res;

var res1 = i += 1;

document.getElementById("s1").innerHTML = res1;

</script>

</head>

<body onresize = "fun()">

<h3> This is an example of using onresize attribute. </h3>

<p> Try to resize the browser's window to see the effect. </p>

<p id = "para"> </p>

<p> You have resized the window <span id = "s1"> 0 </span> times.</p>

</body>

</html>

OUTPUT:
Q54. Design a webpage using JavaScriptonreset.

CODE:
<!DOCTYPE HTML>

<html>

<head>

<title>onreset Event</title>

body{

background-color: pink;

text-align: center;

</style>

</head>

<body>

<h3>Information of student</h3>

<form onreset="alert('Are yoy sure you wants to reset')">

<br>Name: <input type="text" name="name" value=" "><br />

<br>Branch: <input type="text" name="branch" value=" "><br />

<br>College: <input type="text" name="clg" value=" "><br />

<br>Address: <input type="text" name="adr" value=" "><br />

<br>Email Id: <input type="text" name="eid" value=" "><br />

<br><input type="reset" value="RESET">

</form>

</body>

</html>

OUTPUT:
Q55. Design a webpage using JavaScriptonsumbit.

CODE:
<!DOCTYPE html >

<html>

<head>

<title>onsubmit event attribute</title>

<style>

body {

text-align:center;

background-color: lightblue;

h1 {

color:green;

}
</style>

function Geeks() {

alert("Form submitted successfully.") ;

</script >

</head>

<body>

<h2>onsubmit</h2>

<form onsubmit = "Geeks()">

<br>First Name:<input type = "text" value = "" /><br/>

<br>Last Name:<input type = "text" value = "" /><br/>

<br><input type = "submit" value = "Submit" />

</form>

</body>

</html>

OUTPUT:
Q56. Design a webpage using JavaScriptonselect.

CODE:
<!DOCTYPE html>

<html>

<head>

<title>onselect event</title>

</head>

<body>

<h2>Onselect Event in JavaScript</h2>

<form>

<label>Enter User Name:</label>

<input type="text" name="fname" onselect="textselect()"><br>

<label>Enter Password:</label>

<input type="password" name="pwd">

</form>

alert("Some text must not be selected");

</script>

</body>

</html>

OUTPUT:

Q57.Design a webpage using JavaScript cookies

CODE:

OUTPUT:
Q58. Design a webpage demonstrating diffrent core java script refrence (array , boolean ,
date , function ,math ,number ,object, string ,regexp ).

Q59. Write a javscript program to design a simple calulater.

CODE:
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width">

<title>Calculator</title>

<link rel="shortcut icon" href="calculator-icon.png" type="image/x-icon">

<link href="style.css" rel="stylesheet" type="text/css" />

<link href="utils.css" rel="stylesheet" type="text/css" />

href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<script defer src="script.js"></script>

</head>

<div class="flex flex-col items-left">

<button id="dark" class="light_icon" onclick="dark(),darkiocn()"></button>

</div>

<!-- <div>

<input type="checkbox" class="checkbox flex flex-col items-left" id="checkbox">

<label for="checkbox" class="label">

<i class="fas fa-moon"></i>

<i class='fas fa-sun'></i>

</label>

</div> -->

<div class="container calc flex flex-col items-center ">

<h1 class="text-center">Calculator</h1>

<input class="input" type="text" placeholder="0" readonly />

</div>

<button class="button top-btn" onclick="clr()">AC</button>

<button class="button top-btn" onclick="back()">⬅️</button>

<button class="button top-btn" onclick="dis('%')">%</button>

<button class="button right-btn" onclick="dis('/')">÷</button>

</div>
<div class="row">

<button class="button" onclick="dis('7')">7</button>

<button class="button" onclick="dis('8')">8</button>

<button class="button" onclick="dis('9')">9</button>

<button class="button right-btn" onclick="dis('*')">X</button>

</div>

<button class="button" onclick="dis('4')">4</button>

<button class="button" onclick="dis('5')">5</button>

<button class="button" onclick="dis('6')">6</button>

<button class="button right-btn" onclick="dis('-')">-</button>

</div>

<button class="button" onclick="dis('1')">1</button>

<button class="button" onclick="dis('2')">2</button>

<button class="button" onclick="dis('3')">3</button>

<button class="button right-btn" onclick="dis('+')">+</button>

</div>

<button class="button" onclick="dis('0')">0</button>

<button class="button" onclick="dis('00')">00</button>

<button class="button" onclick="dis('.')">.</button>

<button class="button right-btn" onclick="solve()">=</button>

</div>

</body>

</html>

OUTPUT:
Q60. Design a form and validate all the controls places on the forms using javascript.

CODE:

OUTPUT:

The American Botanical Council - The ABC Clinical Guide To Herbs (Mark Blumenthal) (Z-Library)
100% (4)
The American Botanical Council - The ABC Clinical Guide To Herbs (Mark Blumenthal) (Z-Library)
520 pages
Guide No. 12: SSPC: The Society For Protective Coatings
100% (1)
Guide No. 12: SSPC: The Society For Protective Coatings
6 pages
Terminus Hotels Essay
No ratings yet
Terminus Hotels Essay
2 pages
Css
100% (2)
Css
44 pages
Mastering HTML5 CSS3
100% (1)
Mastering HTML5 CSS3
190 pages
HTML Exercise
No ratings yet
HTML Exercise
5 pages
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
TDS Challan 06-05-18
No ratings yet
TDS Challan 06-05-18
1 page
Html5 for Beginners: A Step-By-Step Guide
From Everand
Html5 for Beginners: A Step-By-Step Guide
Zack Mark Lakeman
No ratings yet
Web Development Step by Step - HTML
From Everand
Web Development Step by Step - HTML
Enrique Vicente
No ratings yet
HTML Unleashed: The Complete Guide
From Everand
HTML Unleashed: The Complete Guide
Pen Hur
No ratings yet
CSS Rule: Selector
100% (2)
CSS Rule: Selector
8 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
113 pages
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
No ratings yet
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
8 pages
HTML Cheat Sheet
No ratings yet
HTML Cheat Sheet
2 pages
What Is JavaScript
100% (1)
What Is JavaScript
23 pages
Backpackers Lessons
No ratings yet
Backpackers Lessons
14 pages
Web Design Workshop
No ratings yet
Web Design Workshop
49 pages
Css
No ratings yet
Css
61 pages
CSS Notes
100% (1)
CSS Notes
69 pages
HTML Complete Tutorial
No ratings yet
HTML Complete Tutorial
192 pages
Css Intro2023
100% (1)
Css Intro2023
29 pages
WEB TECH Lab Manual
No ratings yet
WEB TECH Lab Manual
64 pages
Java Web Development Course: Writing CSS Codes
100% (1)
Java Web Development Course: Writing CSS Codes
50 pages
HTML Slides
100% (3)
HTML Slides
104 pages
W3schools: CSS Attribute Selectors
No ratings yet
W3schools: CSS Attribute Selectors
5 pages
16 DOMTree
No ratings yet
16 DOMTree
30 pages
Introduction To HTML
No ratings yet
Introduction To HTML
36 pages
Web Programming Chapter II (HTML&CSS)
100% (1)
Web Programming Chapter II (HTML&CSS)
100 pages
Responsive Web Design Using Media Queries
No ratings yet
Responsive Web Design Using Media Queries
15 pages
Web Technologies Lecture Notes On Unit 2
100% (2)
Web Technologies Lecture Notes On Unit 2
35 pages
JavaScript Note
No ratings yet
JavaScript Note
141 pages
WEB Tech
No ratings yet
WEB Tech
122 pages
Introduction To HTML - HTML Tutorials in Web Page Design by J. Gilson
No ratings yet
Introduction To HTML - HTML Tutorials in Web Page Design by J. Gilson
298 pages
CSS Examples
No ratings yet
CSS Examples
74 pages
Hyper Text Markup Language (HTML) : Unit 5
No ratings yet
Hyper Text Markup Language (HTML) : Unit 5
12 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
Javascript Exercises For Lab Practice
No ratings yet
Javascript Exercises For Lab Practice
4 pages
CSS Interview Questions and Answers Set
100% (1)
CSS Interview Questions and Answers Set
10 pages
Cascading Style Sheets (CSS)
No ratings yet
Cascading Style Sheets (CSS)
45 pages
PHP Questions
No ratings yet
PHP Questions
68 pages
CSS Lab Material
No ratings yet
CSS Lab Material
49 pages
HTML JavaScript
No ratings yet
HTML JavaScript
271 pages
HTML Tutorial
No ratings yet
HTML Tutorial
474 pages
Bootstrap and J Query
No ratings yet
Bootstrap and J Query
130 pages
WT 2
No ratings yet
WT 2
47 pages
PHP Notes
No ratings yet
PHP Notes
68 pages
Introduction To HTML PDF
No ratings yet
Introduction To HTML PDF
43 pages
Css
No ratings yet
Css
113 pages
HTML
100% (1)
HTML
121 pages
Java Script
No ratings yet
Java Script
61 pages
Project On HTML
100% (1)
Project On HTML
15 pages
Java EE694c
100% (1)
Java EE694c
8 pages
1 Intro To HTML
No ratings yet
1 Intro To HTML
30 pages
HTML and CSS
No ratings yet
HTML and CSS
93 pages
PHP and Mysql: Tiji Thomas
100% (1)
PHP and Mysql: Tiji Thomas
83 pages
CSS Full Notez
100% (1)
CSS Full Notez
35 pages
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
100% (1)
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
12 pages
HTML Interview Questions and Answers
No ratings yet
HTML Interview Questions and Answers
56 pages
Web Data: XML
No ratings yet
Web Data: XML
13 pages
HTML Tutorial
No ratings yet
HTML Tutorial
160 pages
C & Data Structures
From Everand
C & Data Structures
Prof. P. Padmanabham
No ratings yet
PHP & MySQL Practice It Learn It
From Everand
PHP & MySQL Practice It Learn It
Jitendra Patel
3/5 (2)
Introduction to HTML & CSS
From Everand
Introduction to HTML & CSS
Claudia Da Silva
4.5/5 (4)
Data Structures Learning Platform
No ratings yet
Data Structures Learning Platform
8 pages
Anjali DV5 - Jupyter Notebook
No ratings yet
Anjali DV5 - Jupyter Notebook
4 pages
CH-3 Part-1 Software Engineering
No ratings yet
CH-3 Part-1 Software Engineering
19 pages
CH-2 Software Engineering
No ratings yet
CH-2 Software Engineering
47 pages
DV5 - Jupyter Notebook PDF
No ratings yet
DV5 - Jupyter Notebook PDF
4 pages
HRM Notes
No ratings yet
HRM Notes
97 pages
Mubadala Supplier Code
No ratings yet
Mubadala Supplier Code
6 pages
Polymerization - High Cycle Valves: Gas To Flare
No ratings yet
Polymerization - High Cycle Valves: Gas To Flare
6 pages
HJR 192
100% (2)
HJR 192
1 page
Kannan G CV
No ratings yet
Kannan G CV
2 pages
BASIC Instrumentation
No ratings yet
BASIC Instrumentation
13 pages
Effects of Computer-Based Teaching Strategy On The Academic Performance of Financial Accounting Students in Nigeria
No ratings yet
Effects of Computer-Based Teaching Strategy On The Academic Performance of Financial Accounting Students in Nigeria
5 pages
Jharkhand Treasury Code 2016
No ratings yet
Jharkhand Treasury Code 2016
3 pages
Why Have Teams Become So Popular
No ratings yet
Why Have Teams Become So Popular
42 pages
Patterns in Action 4.5
No ratings yet
Patterns in Action 4.5
98 pages
Ccie DC Lab 2
No ratings yet
Ccie DC Lab 2
107 pages
Asian Journal 13
No ratings yet
Asian Journal 13
95 pages
Frame Relay: Accessing The WAN - Chapter 3 Sandra Coleman, CCNA, CCAI
No ratings yet
Frame Relay: Accessing The WAN - Chapter 3 Sandra Coleman, CCNA, CCAI
38 pages
Engineering Project Proposal Green Variant
No ratings yet
Engineering Project Proposal Green Variant
42 pages
Heat Load Calculation
No ratings yet
Heat Load Calculation
18 pages
Statutory Construction - The Art or Process of Discovering and Expounding The Meaning
No ratings yet
Statutory Construction - The Art or Process of Discovering and Expounding The Meaning
20 pages
Oracle Applications_ Oracle APPS Important Tables
No ratings yet
Oracle Applications_ Oracle APPS Important Tables
8 pages
Volume 1
No ratings yet
Volume 1
52 pages
Find Testing Pins in Motherboard Bios Without Debug Cards PDF
No ratings yet
Find Testing Pins in Motherboard Bios Without Debug Cards PDF
3 pages
Five Chart Patterns You Need To Know
No ratings yet
Five Chart Patterns You Need To Know
19 pages
Digitising A Roman Tabula Cerata From Alburnus Maior
No ratings yet
Digitising A Roman Tabula Cerata From Alburnus Maior
24 pages
Audit of The Acquisition and Payment Cycle: Tests of Controls, Substantive Tests of Transactions, and Accounts Payable
100% (1)
Audit of The Acquisition and Payment Cycle: Tests of Controls, Substantive Tests of Transactions, and Accounts Payable
13 pages
Galvanizing Procedure-1
No ratings yet
Galvanizing Procedure-1
5 pages
China Dolls Final Script
50% (2)
China Dolls Final Script
9 pages
ASA2212A Datasheet V2 0 PDF
No ratings yet
ASA2212A Datasheet V2 0 PDF
2 pages
Proposal Liv
No ratings yet
Proposal Liv
6 pages