Scribd
Upload
84 views49 pages

LAB File

The document describes several HTML practical exercises involving the use of different HTML tags and elements to create web pages, including formatting text, adding images and links, creating tables, lists and forms. The practicals provide examples and instructions for students to gain experience using basic HTML skills.

Uploaded by

rudraraicha
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
84 views49 pages

LAB File

The document describes several HTML practical exercises involving the use of different HTML tags and elements to create web pages, including formatting text, adding images and links, creating tables, lists and forms. The practicals provide examples and instructions for students to gain experience using basic HTML skills.

Uploaded by

rudraraicha
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/ 49

Practical 1

AIM : Use HTML text formatting tags to create web pages

Formatting elements were designed to display special types of text:


● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text

<!DOCTYPE html>
<html>

<head>
<title>HTML bold Text</title>
</head>

<body>
<!--Normal text-->
<p>Hello</p>

<!--Text in Bold-->
<p>
<b>Hello</b>
</p>

<!--Text in Strong-->
<p>
<strong>Hello</strong>
</p>
<p>

SWPD (4311603) Prepared By: Himani Mandaviya


<del>Hello</del>
</p>
<p>
<sub>Hello</sub>
</p>
<p>
<sup>Hello</sup>
</p>
<p>
<ins>Hello</ins>
</p>
<p>
<i>Hello</i>
</p>

</body>
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-2

AIM : Use image tags to create a web page as per given sample.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hyperlink</title>
</head>
<body>
<a href="https://www.google.co.in/"target="_blank">google </a>

</body>
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-3

AIM : Use HTML to import an image given in sample.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image tag</title>
</head>
<body>
<b></b><h1>The Image</b></h1>
<image src="KALYAN.jpg"alt="image not found"width="auto"height="auto"

</body>
</html>

OUTPUT

PRACTICAL-4
SWPD (4311603) Prepared By: Himani Mandaviya
AIM : UseUse HTML table tags to create web page.

Target Value Description


1. _blank Opens the linked document in a new window.
2. _self Opens the linked document in the same frame.
3. _parent Opens the linked document in the parent frame
4. _top Opens the linked document in the full body of the
window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=o, initial-scale=1.0">
<title>html tags</title>
</head>
<body>
<table border="1" bgcolor="red" align="center"cellpadding="2" cellspacing="4">

<tr>

<th> MONTH </th>


<th> SAVING </th>
</tr>

<tr>

<th> JAN </th>


<th> 100 </th>
</tr>

<tr>

<th> FEB </th>


<th> 200</th>
</tr>
SWPD (4311603) Prepared By: Himani Mandaviya
<tr>

<th> MONTH </th>


<th> 350 </th>
</tr>
</table>
</body>
</html>

OUTPUT

PRACTICAL-5

SWPD (4311603) Prepared By: Himani Mandaviya


AIM : Use a sorted list to create a web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sorted list</title>
</head>
<body>
<h1>KALYAN POLYTECHNIC COURSES</h1>
<!-- use sorted list to create web page -->
<ol type="I">
<li>diploma coures</li>
<li>b.voc</li>
<li>b.sc</li>
<li>yoga course</li>
</ol>

</body>
</html>
OUTPUT

PRACTICAL-6

SWPD (4311603) Prepared By: Himani Mandaviya


AIM : Use an unsorted list to create a web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sorted list</title>
</head>
<body>
<h1>KALYAN POLYTECHNIC COURSES</h1>
<!-- use unsorted list to create web page -->
<ol type="I">
<li>diploma coures</li>
<li>b.voc</li>
<li>b.sc</li>
<li>yoga course</li>
</ol>
</body>
</html>

OUTPUT

PRACTICAL-7

SWPD (4311603) Prepared By: Himani Mandaviya


AIM : Use definition list to create a web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition list</title>
</head>
<body>
<dl>
<dt><B>HTML</B></dt>
<dd>Hyper text markup language </dd>
<dt><b>POP</b></dt>
<dd>procedure oriented programming </dd>
<dt><b>boop</b></dt>
<dd>basic object orianted programming</dd>
</dl>
</body>
</html>

OUTPUT

PRACTICAL-8

SWPD (4311603) Prepared By: Himani Mandaviya


AIM : Use semantic tags to organize web page contents

A semantic element clearly describes its meaning to both the browser and the developer.
semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to
indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web page:
● <article>
● <aside>
● <details>
● <figcaption>
● <figure>
● <footer>
● <header>
● <main>
● <mark>
● <nav>
● <section>
● <summary>
● <time>

PRACTICAL-9(a)

SWPD (4311603) Prepared By: Himani Mandaviya


AIM : Create a student registration webpage using different HTML

<Html>
<head>
<title>

Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>

<form>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br>
<br>

SWPD (4311603) Prepared By: Himani Mandaviya


<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>

Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>

Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>

Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>

Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>

SWPD (4311603) Prepared By: Himani Mandaviya


OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-9(b)

AIM : Create student feedback form using different HTML form elements.

<HTML>
<HEAD>
<TITLE>Feedback Form</TITLE>
</HEAD>
<BODY>
<H1>Feedback Form</H1>
<FORM action="mailto:[email protected]" method="post" enctype="text/plain">
First Name : <INPUT type="text" name="firstname" placeholder="Enter name here">
Second Name : <INPUT type="text" name="secondname" placeholder="Enter surname here">
<BR>
<BR>
<!--It's important that both of these radio button have the same name so they behave as one
component (i.e. Only one can be selected at a time)-->
<INPUT type="radio" name="gender" value="male">Male<BR>
<INPUT type="radio" name="gender" value="female">Female
<BR>
<BR>
<!--This uses the new HTML "email" INPUT type which will automatically validates the email
address when the SUBMIT button is clicked-->
email: <INPUT type="email" name="mail" placeholder="e-mail address">
<BR>
<BR>
Comment :<BR>
<TEXTAREA rows="6" cols="50" name="commen tfield"></TEXTAREA>
<BR>
<SELECT name="countychooser">
<OPTION value="cork">Cork</OPTION>
<OPTION value="dublin">Dublin</OPTION>
<OPTION value="galway">Galway</OPTION>
<OPTION value="kerry">Kerry</OPTION>
</SELECT>
<BR>

SWPD (4311603) Prepared By: Himani Mandaviya


<BR>
<INPUT TYPE="submit" value="Send Feedback">
<INPUT TYPE="reset" value="Reset">
</FORM>
</BODY>
</HTML>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-10

AIM : Create a bank account opening form using different HTML form elements in
Kompozer.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Digital Form</title>
</head>
<body>
<div class="container">
<h1 class="main-header">Account Application Form.</h1>
<hr>
<form id="app-form" action="">
<fieldset class="sub-container" id="basic-details">
<h2 class="sub-heading">Basic Details</h2>
<hr>
<label for="dropdown" class="standard-label">
Title<span class="required">*</span>
<br>
<select id="dropdown" class="standard-select" required>
<option value="select" disabled selected>Select Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</label>
<label for="firstname" class="standard-label">
First Name<span class="required">*</span>

SWPD (4311603) Prepared By: Himani Mandaviya


<input class="standard-input" name="firstname" id="firstname" type="text"

placeholder="First name..." required>


</label>
<label for="middlenames" class="standard-label">
Middle Names (If Applicable)
<input class="standard-input" name="middlename" id="middlename" type="text"

placeholder="Middle names...">
</label>
<label for="lastname" class="standard-label">
Last Name<span class="required">*</span>
<input class="standard-input" name="lastname" id="lastname" type="text"

placeholder="Last name..." required>


</label>
<label for="phone-number" class="standard-label">
Phone Number<span class="required">*</span>
<input class="standard-input" type="tel" id="phone" name="phone" pattern='^\+?\d{10,12}'

placeholder="Example: 01925999111" required>


</label>
<label for="email-address" class="standard-label">
Email<span class="required">*</span>
<input class="standard-input" id="email-address" type="email" placeholder="Your email

address..." required>
</label>
<label for="DOB" class="standard-label">
Date of Birth<span class="required">*</span>
<input class="standard-input" type="date" name="DOB" id="DOB" required>
</label>
<label for="accounttype" class="standard-label">

What type of account are you applying for?<span class="required">*</span>


<br>

SWPD (4311603) Prepared By: Himani Mandaviya


<select id="account-select" class="standard-select" required>
<option value="select" disabled selected>Choose Account</option>
<option value="basic-current">Basic Current Account</option>
<option value="premium-current">Premium Current Account</option>
<option value="instant-saver">Instant Access Savings Account</option>
<option value="lifetime-isa">Lifetime ISA</option>
<option value="help-to-buy">Help to Buy ISA</option>
</select>
</label>
<button type="button" id="show-address">Continue</button>
</fieldset>
<fieldset class="sub-container" id="address-history">
<h2 class="sub-heading">Address History</h2>
<hr>
<h3 class="small-heading">Are you currently a UK resident?</h3>
<label for="yes" class="radio-label">
<input class="radio-input" name="UK-res" value="yes" id="yes" type="radio">Yes</input>
</label>
<label for="no" class="radio-label">
<input class="radio-input" name="UK-res" value="no" id="no" type="radio">No</input>
</label>
<p id="non-uk">We're really sorry. We currently only offer banking services to UK
residents.</p>
<div id="current-address">
<h3 class="small-heading">Current Address</h3>
<label for="line1" class="standard-label">
Address line 1<span class="required">*</span>
<input class="standard-input" type="text" required>
</label>
<label for="line2" class="standard-label">
Address line 2
<input class="standard-input" type="text">
</label>
<label for="town-city" class="standard-label">
Town/City<span class="required">*</span>
<input class="standard-input" type="text" required>

SWPD (4311603) Prepared By: Himani Mandaviya


</label>
<label for="county" class="standard-label">
County
<input class="standard-input" type="text">
</label>
<label for="postcode" class="standard-label">
Post Code<span class="required">*</span>
<input class="standard-input" type="text" maxlength="8" required>
</label>
<h3 class="small-heading">Have you lived at any other address within the last 5 years?</h3>
<label for="yes-prev" class="radio-label">
<input class="radio-input" name="UK-res" value="yes" id="yes-prev"
type="radio">Yes</input>
</label>
<label for="no-prev" class="radio-label">
<input class="radio-input" name="UK-res" value="no" id="no-prev"
type="radio">No</input>
</label>
</div>
<div id="previous-address">
<h3 class="small-heading">Previous Address</h3>
<label for="line1" class="standard-label">
Address line 1<span class="required">*</span>
<input class="standard-input" type="text">
</label>
<label for="line2" class="standard-label">
Address line 2
<input class="standard-input" type="text">
</label>
<label for="town-city" class="standard-label">
Town/City<span class="required">*</span>
<input class="standard-input" type="text">
</label>
<label for="county" class="standard-label">
County
<input class="standard-input" type="text">

SWPD (4311603) Prepared By: Himani Mandaviya


</label>
<label for="postcode" class="standard-label">
Post Code<span class="required">*</span>
<input class="standard-input" type="text" maxlength="8">
</label>
</div>
<button type="button" id="get-consent">Continue</button>
</fieldset>

<fieldset class="sub-container" id="your-consent">


<h2 class="sub-heading">Your Consent</h2>
<hr>
<label class="standard-label" id="credit-search" for="credit-search">
Tick the box below to allow the bank to use the details you have provided to conduct a credit
search if necessary.
<br>
<input type="checkbox" id="credit-click" name="credit-search"><br>
</label>
<label class="standard-label" for="info-request" id="info-request">
Tick the box below to allow the bank to contact you via email if further information is needed
to progress your application.
<br>
<input type="checkbox" id="info-click" name="info-request"><br>
</label>
<input id="submit-app" type="submit" name="submit" value="Submit Application"
onclick="logValues()">
</fieldset>
</form>
</div>
</body>
</html>

SWPD (4311603) Prepared By: Himani Mandaviya


OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-11

AIM : Use inline, internal and external style sheets for the student registration form OR
bank account form created in previous practical.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}

input[type=text], input[type=password], textarea {


width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {

SWPD (4311603) Prepared By: Himani Mandaviya


padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.register btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.register btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Student Registeration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>

SWPD (4311603) Prepared By: Himani Mandaviya


<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Re-type Password</b></label>


<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
SWPD (4311603) Prepared By: Himani Mandaviya
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-12(a)

AIM :Use different CSS elements to create and format your Profile Page (Note: use CSS
Background, Text, Font, Tables, Links,Images, Margin etc)

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
p{
border: 2px solid powderblue;
margin: 50px;
SWPD (4311603) Prepared By: Himani Mandaviya
}
</style>
</head>
<body>
<h1>Himani Mandaviya</h1>
<p>Kalyan Polytechnic College</p>
<p>Ad.hoc Lecturer (Computer Department)</p>
<p>Sem :2 </p>
<p>Subject: Static Web Page Design</p>
</body>
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-12(b)

AIM :Create and format your class time table Page Using Different CSS Elements

.CSS FILE CODE


body {
background-color: #ffffff;
mix-blend-mode: darken;
}
header h1 {
margin-top: 10%;
text-align: center;
color: black;
font-weight: bold;
font-family: sans-serif;
}
table {
margin-top: 2%;
width: max-content;
border: 1px solid black;
height: 300px;

SWPD (4311603) Prepared By: Himani Mandaviya


margin-left: 23%;
}
td {
text-align: center;
border: 1px solid black;
}
#blank {
color: #000;
background-color: #fff;
}
#s {
font-weight: 800;
text-transform: uppercase;
font-family: sans-serif;
background-color: #ffffff;
}
#seminar {
font-weight: 800;
font-family: sans-serif;
background-color: #ffffff;
text-transform: uppercase;
}

#sub {
color: black;
font-family: sans-serif;
font-weight: 400;
background-color: #ffffff;
}
#sub1 {
background-color: #fff;
}
#sub2 {
color: black;
text-transform: uppercase;
background-color: #ffffff;

SWPD (4311603) Prepared By: Himani Mandaviya


}
#sub3 {
background-color: #ffffff;
font-family: sans-serif;
font-weight: 800;
}
#box1 {
color: cornflowerblue;
font-family: sans-serif;
font-weight: 800;
}
#box2 {
color: darkorange;
font-weight: 800;
font-family: sans-serif;
}
#box3 {
color: darkviolet;
font-weight: 800;
font-family: sans-serif;
}
#box4 {
color: green;
font-weight: 800;
font-family: sans-serif;
}
#box5 {
color: red;
font-family: sans-serif;
font-weight: 800;
}
#box6 {
color: hotpink;
font-weight: 800;
font-family: sans-serif;
}

SWPD (4311603) Prepared By: Himani Mandaviya


#box7 {
color: blue;
font-family: sans-serif;
font-weight: 800;
}

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>time table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
</style>
</head>
<body>

<header>
<h1>COLLEGE TIME TABLE</h1>
</header>
<table>
<thead>
<tr>
<td id="sub1"> </td>
<td id="sub">8:30-9:30</td>
<td id="sub">9:30-10:30</td>
<td id="sub">10:30-11:30</td>
<td id="sub">11:30-12:30</td>
<td id="sub">12:30-2:00</td>
<td id="sub">2:00-3:00</td>
<td id="sub">3:00-4:00</td>
<td id="sub">4:00-5:00</td>
</tr>
</thead>
<tbody>

SWPD (4311603) Prepared By: Himani Mandaviya


<tr>
<td id="sub">MONDAY</td>
<td id="blank">---</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H
<td id="box4">SUB4</td>
<td id="box5">SUB5</td>
<td id="s">counselling class</td>
</tr>
<tr>
<td id="sub">TUESDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td id="blank">---</td>
<td id="box2">SUB2</td>

<td id="box2">SUB2</td>
<td id="sub2">library</td>
</tr>
<tr>
<td id="sub">WEDNESDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box5">SWA</td>
<td id="blank">---</td>
<td colspan="3"id="sub3" >LAB</td>
</tr>
<tr>
<td id="sub">THURSDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td id="blank">---</td>

SWPD (4311603) Prepared By: Himani Mandaviya


<td id="box2">SUB2</td>
<td id="box2">SUB2</td>
<td id="sub2">library</td>
</tr>
<tr>
<td id="sub">FRIDAY</td>
<td id="box1">SUB1</td>
<td id="box2">SUB2</td>
<td id="box3">SUB3</td>
<td id="blank">---</td>
<td id="box4">SUB4</td>
<td id="box5">SUB5</td>
<td id="sub2">library</td>
</tr>
<tr>
<td id="sub">SATURDAY</td>
<td id="box1">SUB1</td>
<td colspan="3" id="seminar">seminar</td>
<td id="box4">SUB4</td>

<td id="box5">SUB5</td>
<td id="sub2">library</td>
</tr>
</tbody>
</table>
</body>
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-13(a)

AIM :Use JavaScript to perform the following operations: find roots of quadratic equation

// JavaScript program to find roots of a quadratic equation


// Prints roots of quadratic
function findRoots(a, b, c) {
return b * b - 4 * a * c;
}
function myResult(a, b, c) {
const d = findRoots(a, b, c);

SWPD (4311603) Prepared By: Himani Mandaviya


if (d > 0) {
const root1 = (-b + Math.sqrt(d)) / (2 * a);
const root2 = (-b - Math.sqrt(d)) / (2 * a);
return [root1, root2];
} else if (d === 0) {
const root = -b / (2 * a);
return [root];
} else {
return [];
}
}
let a = 1;
let b = -3;
let c = 2;
let result = myResult(a, b, c);
console.log("Roots:", result);

OUTPUT

PRACTICAL-13(b)

AIM : Use JavaScript to find the highest from given three values

function findLargest(num1, num2, num3) {


if (num1 >= num2 && num1 >= num3) {
return num1;
} else if (num2 >= num1 && num2 >= num3) {
return num2;
} else {
return num3;

SWPD (4311603) Prepared By: Himani Mandaviya


}
}

// Example usage
const largestNumber = findLargest(10, 5, 8);
console.log("Largest number:", largestNumber);

OUTPUT

PRACTICAL-14

AIM : Use JavaScript to check whether a given character is vowel or consonant using if else
ladder.

function checkChar(char){
ch = char.toLowerCase();
if (ch == 'a' || ch == 'e' || ch == 'i' || ch == 'o' || ch == 'u')
return console.log("Given character is a Vowel");
return console.log("Given character is a Consonent");
}

SWPD (4311603) Prepared By: Himani Mandaviya


checkChar('G');
checkChar('A')

OUTPUT

PRACTICAL-15

AIM : Use JavaScript to check whether a given character is vowel or consonant using switch
case.

function isVowel(ch)
{
var check = 0;
switch (ch) {
case 'a':

SWPD (4311603) Prepared By: Himani Mandaviya


case 'e':
case 'i':
case 'o':
case 'u':
case 'A':
case 'E':
case 'I':
case 'O':
case 'U':
check = 1;
}
return check;
}
document.write("a is " + isVowel('a') + "<br>");
document.write("x is " + isVowel('x') + "<br>");

OUTPUT

PRACTICAL-16

AIM : Use JavaScript to print first 10 even numbers.

function first10Even() {
let cnt = 0;
let number = 0;
while (cnt < 10) {
if (number % 2 === 0) {
cnt++;

SWPD (4311603) Prepared By: Himani Mandaviya


process.stdout.write(number + " ");
}
number++;
}
}

console.log("First 10 even numbers are:");


first10Even();

OUTPUT

PRACTICAL-17

AIM : Use JavaScript to calculate power of given number.

// Base number input


let n = 5

// Power input
let power = 3

SWPD (4311603) Prepared By: Himani Mandaviya


// Result variable
let num = 1;
for (let i = 0; i < power; ++i) {
num = num * n;
}

// Display output
console.log(num);

OUTPUT

PRACTICAL-18

AIM : Use JavaScript to print multiplication table of given number.

// Javascript program to print


// table of a number

let n = 5;
for (let i = 1; i <= 10; ++i)
console.log(n + " * " + i +

SWPD (4311603) Prepared By: Himani Mandaviya


" = " + n * i);

OUTPUT

PRACTICAL-19(a)

AIM : Use JavaScript user defined functions to perform the following operations: to calculate
sum of 1 to n

// Javascript program to find sum of first


// n natural numbers.
function findSum(n) {
let sum = 0;

SWPD (4311603) Prepared By: Himani Mandaviya


for (let i = 1; i <= n; i++)
sum = sum + i;
return sum;
}

// Driver code
const n = 5;
console.log(findSum(n));

OUTPUT

PRACTICAL-19(b)

AIM :Use JavaScript user defined functions to perform the following to check whether given
number is prime or not

// JavaScript program to check whether a number


// is prime or not using recursion

// function check whether a number

SWPD (4311603) Prepared By: Himani Mandaviya


// is prime or not
var i = 2;
function isPrime(n) {

// corner cases
if (n == 0 || n == 1) {
return false;
}
// Checking Prime
if (n == i) return true;
// base cases
if (n % i == 0) {
return false;
}
i++;
return isPrime(n);
}
// Driver Code
isPrime(35) ? document.write(" true\n") : document.write(" false\n");

OUTPUT

PRACTICAL-20(a)

AIM : Use JavaScript to perform the following operations: take input of student name
and address and display in a dialog box.

<html>
<head>
<script type = "text/javascript">
function fun() {
SWPD (4311603) Prepared By: Himani Mandaviya
prompt ("This is a prompt box", "Himani Mandaviya, Jamnagar");
}
</script>
</head>
<body>
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
</form>
</body>
</html>

OUTPUT

PRACTICAL-20(b)

AIM : Use JavaScript to perform the following operations:change background color of webpage as
selected by user from a list of colors given in combo box.

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-21(a)

Use JavaScript to perform the following operations: calculate the factorial of a given number
entered into a textbox.Display the result in another textbox.

<!DOCTYPE html>
<html>
<head>
</head>
SWPD (4311603) Prepared By: Himani Mandaviya
<body style = "text-align: center; font-size: 20px;">
<h1> Welcome to Factorial Operations</h1>
Enter a number: <input id = "num">
<br><br>
<button onclick = "fact()"> Factorial </button>
<p id = "res"></p>
<script>
function fact(){
var i, num, f;
f = 1;
num = document.getElementById("num").value;
for(i = 1; i <= num; i++)
{
f = f * i;
}
i = i - 1;
document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;
}
</script>
</body>
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya


PRACTICAL-21(b)

SWPD (4311603) Prepared By: Himani Mandaviya


AIM :Use JavaScript to perform the following operations: perform arithmetic operations on
two numbers entered into textboxes. Use Radio buttons to select arithmetic operations
(Addition, Subtraction, Multiplication and Division). Display the result in another textbox.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function multiply(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=c;
}
function addition(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a+b;
document.my_cal.total.value=c;
}
function subtraction(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a-b;
document.my_cal.total.value=c;
}
function division(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a/b;
document.my_cal.total.value=c;
}

function modulus(){
a=Number(document.my_cal.first.value);

SWPD (4311603) Prepared By: Himani Mandaviya


b=Number(document.my_cal.second.value);
c=a%b;
document.my_cal.total.value=c;
}
</script>
<!-- Opening a HTML Form. -->
<form name="my_cal">

<!-- Here user will enter 1st number. -->


Number 1: <input type="text" name="first">
<!-- Here user will enter 2nd number. -->
Number 2: <input type="text" name="second">

<br><br>
<input type="button" value="ADD" onclick="javascript:addition();">
<input type="button" value="SUB" onclick="javascript:subtraction();">
<input type="button" value="MUL" onclick="javascript:multiply();">
<input type="button" value="DIV" onclick="javascript:division();">
<input type="button" value="MOD" onclick="javascript:modulus();">

<br><br>
<!-- Here result will be displayed. -->
Get Result: <input type="text" name="total">
</body>
</html>

OUTPUT

SWPD (4311603) Prepared By: Himani Mandaviya

You might also like