Scribd
Upload
91 views

User Interface Design LAB MANUAL (23CSE113) CSE-1 YEAR II SEMESTER (2023-2024) Dontha Madhusudhana Rao

user interface design

Uploaded by

rishitha5768
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
91 views

User Interface Design LAB MANUAL (23CSE113) CSE-1 YEAR II SEMESTER (2023-2024) Dontha Madhusudhana Rao

user interface design

Uploaded by

rishitha5768
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

USER INTERFACE DESIGN

LAB MANUAL (23CSE113)


CSE-1st YEAR II SEMESTER (2023-2024)
Submitted to
DONTHA MADHUSUDHANA RAO

NAME : B.RISHITHA REDDY


ROLL NO : AV.SC.U4CSE23209
CLASS : CSE-C

1
INDEX

S.no Title Date Pages SIGN

1 Create your class time table 4-7


using html
2 Create a Registration form 8-11

3 Create AMRITA web site 12-22


using html and css
4 Design a webpage with at 23-25
least 2 div’ s contains 2
images and 2buttons and 2 h1s
use an appropriate internal css
5 Create a webpage with css box 26-30
model at least 3 <div> s
contains one video 1 image 1
table 3 buttons 3<h2>s
using css

6 Create a webpage contains 3 31-33


buttons with transition effects
and an image
7 Create a webpage contains 3 34-37
buttons with transition effects
and animations for the images
8 Create a html document with 3 38-40
divs and images apply
transforms for each div &
create another div write self-
introduction apply animations
for the text.
9 JAVASCRIPT 41-45
a) Write a JavaScript program
to determine if a number is
even or odd
b) Write a JavaScript program
to determine if a number is
prime or not
c)Write a JavaScript program
to find the factorial of a given
number
d)Write a JavaScript program
to find the given; number is
Armstrong or not

2
10 1)Write a JS program for 14/06/2024 46-53
Spy Number (Sum and
Products of Digits are same)
2)Write a JS program to
Check if the given number is
a perfect square
3)Write a JS program for
Sum of the digits of a given
number
4)Write a JS program to
find the sum and difference
of two numbers

3
LAB 1:
AIM : Create a class time table using HTML.
DESCRIPTION:
HTML TABLES allows web developers to arrange data in rows and columns
<tr>tag defines each table
<th>tag defines the header of each table. Text is defaultly bold and center alignment.
<td>tag defines data/cell of each table. Text is regular and left aligned.
Cellspacing is used to specify space b/w cells.
Cellpadding is used to create space b/w cell content and cell walls.
Rowspan is attribute specify the no. of rows a cell should span.
Cellspan is attribute specify the no. of columns a cell should span.
PROCEDURE:
Program:
<html>
<head>
<title>Timetable</title>
<style>
body {
font-family: Arial;
}
.timetable {
width: 100%;
border-collapse: collapse;
}
.timetable th, .timetable td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.timetable th {
text-align: left;
background-color: #FFB6C1;
color: white;
}
.timetable tr:hover {
background-color: #ddd;
}
.timetable tr:nth-child(even) {
background-color: #f2f2f2;

4
}
</style>
</head>
<body>
<h1>Timetable</h1>
<table class="timetable">
<tr>
<th colspan="12">B.RISHITHA REDDY</th>
</tr>
<tr>
<th colspan="12" ">Revised Time Table CSE-C 2nd Semister</th>
</tr>
<tr>
<th rowspan="2">Time/Day</th>
<th>slot 1</th>
<th>slot 2</th>
<th rowspan="2">10:35 - 10:45</th>
<th>slot 3</th>
<th>slot 4</th>
<th rowspan="2">12:25 - 1:30</th>
<th>slot 5</th>
<th>slot 6</th>
<th rowspan="2">3:10 - 3:20</th>
<th>slot 7</th>
<th>slot 8</th>
<tr>
<th>8:55 - 9:35</th>
<th>9:35 - 10:35</th>
<th>10:45 - 11:35</th>
<th>11:35 - 12:25</th>
<th>1:30 - 2:20</th>
<th>2:20 - 3:10</th>
<th>3:20 - 4:10</th>
<th>4:10 - 5:00</th>
</tr>
<tr>
<td><b>Monday</td>
<td style="color:blue;">LA</td>

5
<td style="color:violet;">MP</td>
<td rowspan="6">Break</td>
<td style="color:violet;">MP</td>
<td style="color:blue;">LA</td>
<td rowspan="6">Break</td>
<td Colspan="2" style="color:red;">Manufacturing practice</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Tuesday</td>
<td style="color:violet;">MP</td>
<td style="color:pink;">OOP</td>
<td style="color:orange;">DM</td>
<td style="color:green;">GIG</td>
<td Colspan="2" style="color:blue;">LA</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Wednesday</td>
<td style="color:pink;">OOP</td>
<td style="color:red;">UID</td>
<td style="color:orange;">DM</td>
<td style="color:green;">GIG</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Thursday</td>
<td style="color:red;">UID</td>
<td style="color:blue;">LA</td>
<td colspan="2"style="color:pink;">OOP Lab</td>

6
<td colspan="2" style="color:orange;">DM LAB</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Friday</td>
<td style="color:orange;">DM</td>
<td style="color:pink;">OOP</td>
<td colspan="2" style="color:red;">UID LAB</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
OUTPUT:

7
LAB 2:
AIM: Create a registration form using html.
DESCRIPTION: To create a form we used elements like :
1.text
2.checkbox
3.submit button
4.radio
5.range
6.dropdown list
7.date
8.time
9.color
10.text area
11.file
12.password
13.number
CODE:
<!DOCTYPE html>
<html>
<head>
<form>
<body>
<table bordercolor="black" align="center" border="10" cellpadding = "10" cellspacing = "5"
height="100" width="20">
<caption><b><i>"Registration form"</caption>
<tr>
<td>
<b>Name:
</td>
<td>
<input type="text" name="fname">
</td>
</tr>

<tr>
<td>
<b>Email:
</td>
<td>

8
<input type="text" name="email">
</td>
</tr>

<tr>
<td>
<b>DOB:
</td>
<td>
<input type="date" name="DOB">
</td>
</tr>

<tr>
<td>
<b>Age:
</td>
<td>
<input type="Number" name="age" min="1" max="100">
</td>
</tr>

<tr>
<td>
<b> Time:
</td>
<td>
<input type="Time" name="Time">
</td>
</tr>

<tr>
<td>
<b> Country:
</td>
<td>
<select name="country">
<option value="">Select</option>

9
<option value="india">INDIA</option>
<option value="usa">USA</option>
<option value="mexico">Mexico</option>
</select>
</td>
</tr>
<tr>
<td>
<b> Password:
</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>
<b> File:
</td>
<td>
<input type="file" name="file">
</td>
</tr>
<tr>
<td>
<b> Gender:
</td>
<td>
<input type="radio" name="male">Male
<input type="radio" name="female">Female
</td>
</tr>
<tr>
<td>
<b> Hobbies:
</td>
<td>
<input type="checkbox" name="coding">CODING
<input type="checkbox" name="novels">NOVELS

10
</td>
</tr>
<tr>
<td>
<b> Bio:
</td>
<td>
<textarea name="bio"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:

11
LAB 3:

AIM: Create AMRITA web site using html and css


CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amrita Vishwa Vidhya Peetham</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #DE3163;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
color: white;
margin: 0;
}
nav {
background-color: #DE3163;
padding: 20px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 10px;
}
nav a:hover {
color: #ffcc00;

12
}
.container {

border-radius: 15px;
height:70vh;
margin-top:3px;
display: flex;
}
.signin {
background-color: white;
padding: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
}
.formelement {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.submit {
display: flex;
justify-content: space-between;
}
button {
padding: 10px 20px;
background-color: #DE3163;

13
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #cc3366;
}
.main-content {
matter{
color:white;
margin-left: 100px;
margin-top: 50px;
font-weight: 200px;
height:600px;
width:800px;

.main-content p{
font-weight: bolder;
font-size: 20px;
font-family: "Open Sans", sans-serif;
}

}
.highlight {
color: #ffcc00;
}
.signin {
width: 25%; /* adjust the width to make it smaller */
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
}

.main-content {

14
width: 70%; /* adjust the width to make it bigger */
height: 600px; /* adjust the height as needed */
overflow: auto; /* add this to make the iframe scrollable */
padding: 20px;
color: white;
margin-left: 20px;
}
</style>
</head>
<body>
<header>
<div>
<h1>Amrita Vishwa Vidhyapeetham</h1>
</div>
<div>
<img src="logoo.png" >
</div>
</header>
<nav>
<a href="coimbatore.html" target="ma" >Coimbatore</a>
<a href="amritapuri.html" target="ma">Amritapuri</a>
<a href="banglore.html" target="ma">Banglore</a>
<a href="amaravathi.html" target="ma">Amaravathi</a>
<a href="kochi.html" target="ma">Kochi</a>
</nav>

<main>
<div class="container">
<div class="signin">
<form action="">
<div class="formelement">
<label for="name">USERNAME:</label>
<input type="text" id="name" placeholder="username" required>
</div>
<div class="formelement">
<label for="password">PASSWORD:</label>
<input type="password" id="password" placeholder="password" required>
</div>

15
<div class="submit">
<button type="submit">Sign In</button>
<button type="submit">Sign Up</button>
</div>
</form>
</div>
<div class="main-content">

<iframe src="amritahome.png" name="ma" height="95%" width="320%"


scroll="No"></iframe>
</div>

</div>

</div>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
}
.timetable {
width: 100%;
border-collapse: collapse;
}
.timetable th, .timetable td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.timetable th {

16
text-align: left;
background-color: #FFB6C1;
color: white;
}
.timetable tr:nth-child(even) {
background-color: #f2f2f2;
}
.timetable tr:hover {
background-color: #ddd;
}

</style>

</head>
<body>
<h1>Timetable</h1>
<table class="timetable">
<thead>
<tr>
<th colspan="12">B.RISHITHA REDDY</th>
</tr>
<tr>
<th colspan="12" ">Revised Time Table CSE-C 2nd Semister</th>
</tr>

<tr>
<th rowspan="2">Time/Day</th>
<th>slot 1</th>
<th>slot 2</th>
<th rowspan="2">10:35 - 10:45</th>
<th>slot 3</th>
<th>slot 4</th>
<th rowspan="2">12:25 - 1:30</th>
<th>slot 5</th>
<th>slot 6</th>
<th rowspan="2">3:10 - 3:20</th>
<th>slot 7</th>
<th>slot 8</th>

17
<tr>
<th>8:55 - 9:35</th>
<th>9:35 - 10:35</th>
<th>10:45 - 11:35</th>
<th>11:35 - 12:25</th>
<th>1:30 - 2:20</th>
<th>2:20 - 3:10</th>
<th>3:20 - 4:10</th>
<th>4:10 - 5:00</th>
</tr>

<tr>
<td><b>Monday</td>
<td style="color:blue;">LA</td>
<td style="color:violet;">MP</td>
<td rowspan="6">Break</td>
<td style="color:violet;">MP</td>
<td style="color:blue;">LA</td>
<td rowspan="6">Break</td>
<td Colspan="2" style="color:red;">Manufacturing practice</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Tuesday</td>
<td style="color:violet;">MP</td>
<td style="color:pink;">OOP</td>
<td style="color:orange;">DM</td>
<td style="color:green;">GIG</td>
<td Colspan="2" style="color:blue;">LA</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Wednesday</td>

18
<td style="color:pink;">OOP</td>
<td style="color:red;">UID</td>
<td style="color:orange;">DM</td>
<td style="color:green;">GIG</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Thursday</td>
<td style="color:red;">UID</td>
<td style="color:blue;">LA</td>
<td colspan="2"style="color:pink;">OOP Lab</td>
<td colspan="2" style="color:orange;">DM LAB</td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td><b>Friday</td>
<td style="color:orange;">DM</td>
<td style="color:pink;">OOP</td>
<td colspan="2" style="color:red;">UID LAB</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>
</body>
</html>
OUTPUT:

19
20
21
22
LAB 4:
AIM: Design a webpage with at least 2 div’ s contains 2 images and 2buttons and 2 h1s use an
appropriate internal css.
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: #AFAFAF;
}
.card {
width: 45%;
margin: 1%;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: White;
position: relative;
}
.card img {
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;

23
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(2px);
border-radius: 10px;
z-index: 0;
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::before {
opacity: 1;
}
h1 {
font-size: 18px;
margin-top: 0;
margin-bottom: 10px;
color:#AFAFAF;
}
button {
background-color: #AFAFAF;
color: white;
padding: 10px 20px;
border: black;
border-radius: 15px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
filter: brightness(1.1);
transition: filter 0.3s;
}
button:hover {
background-color: #AFAFAF;
filter: brightness(1.2);
}
</style>
</head>
<body>
<div class="card">

24
<img src="./ferrari.jpeg" >
<h1>The Ferrari 458 Italia is a mid-engine sports car with a V8 engine that has won
more than 30 international awards. It has a 4.5L naturally aspirated V8 engine that produces 562
horsepower at 9,000 RPM, and 398 lb-ft of torque at 6,000 RPM.</h1>
<button>Ferrari 458</button>
</div>
<div class="card">
<img src="./mclaren2.jpeg">
<h1>McLaren Senna is a limited-production mid-engine sports car that McLaren
Automotive has been manufacturing since 2018. Third model in the McLaren Ultimate Series, along
with the F1 and the P1. The Senna is named after the legendary Formula 1 driver, Ayrton Senna.</h1>
<button>Mclaren senna</button>
</div>
</body>
</html>

OUTPUT:

25
LAB 5:

AIM: Create a webpage with css box model at least 3 <div> s contains one video 1 image 1 table
3 buttons 3<h2>s using css
CODE:
Style.css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}

.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.video-container {
margin-bottom: 20px;
padding: 20px;
background-color: #333;
border-radius: 10px;
}

.video-container video {
width: 100%;
height: 300px;
object-fit: cover;
}

26
.image-container {
margin-bottom: 20px;
padding: 20px;
background-color: #f7f7f7;
border-radius: 10px;
}

.image-container img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
}

.table-container {
margin-bottom: 20px;
padding: 20px;
background-color: #f7f7f7;
border-radius: 10px;
}

.table-container table {
width: 100%;
border-collapse: collapse;
}

.table-container th, .table-container td {


padding: 10px;
border: 1px solid #ddd;
}

.button-container {
margin-bottom: 20px;
padding: 20px;
background-color: #f7f7f7;

27
border-radius: 10px;
}

.button-container button {
margin-right: 10px;
padding: 10px 20px;
border: none;
border-radius: 10px;
background-color: #ccdd00;
color: #fff;
cursor: pointer;
}

.button-container button:hover {
background-color: #3e8e41;
}

h2 {
margin-bottom: 20px;
padding: 10px;
background-color: #f7f7f7;
border-radius: 10px;
color: #333;
}
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="video-container">
<video width="100%" controls>
<source src="video.mp4" type="video/mp4">

28
Your browser does not support the video tag.
</video>
</div>
<div class="image-container">
<img src="ferrari.jpg" >
</div>
<div class="table-container">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Mr.Anjani</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Ms.Anju</td>
<td>60</td>
<td>India</td>
</tr>
</table>
</div>
<div class="button-container">
<button>video</button>
<button>image</button>
<button>table</button>
</div>
<h2>there's a video</h2>
<h2>the middle one is image</h2>
<h2>the last one is table</h2>

29
</div>
</body>
</html>
OUTPUT:

30
LAB 6:
AIM: Create a webpage contains 3 buttons with transition effects and an image
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
/* Add some basic styling to our buttons and image */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

button {
background-color: #FC8EAC;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}

button:hover {
background-color: #3e8e41;
}

31
img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px;
}
.button1 {
transition: background-color 0.5s, color 0.5s;
}
.button1:hover {
background-color: #66d9ef;
color: #ffffff;
}
.button2 {
transition: transform 0.5s;
}
.button2:hover {
transform: scale(1.5);
}
.button3 {
transition: opacity 0.5s;
}
.button3:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
<button class="button3">Button 3</button>
<img src="ferrari.jpg" alt="Image">
</div>
</body>
</html>

32
OUTPUT:

33
LAB 7:
AIM: Create a webpage contains 3 buttons with transition effects and animations for the images
CODE:
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color:white;
}

.nav {
background-color: #FF9999;
text-align: center;
border-radius: 15px;
padding: 30px 0;
width: 100%
display: flex;
justify-content: space-between;
align-items: center;
}

.btn {
padding: 10px 20px;
margin: 10px;
background-color: #ffcc00;
color: black;
border: none;

34
border-radius: 5px;
cursor: pointer;
}

.btn:hover {
background-color: #45a049;
transform: scale(1.1);
}

.btn:nth-child(1) {
transition: background-color 0.5s, transform 0.5s, rotate(0.5s); /* uncomment for rotate effect */
}

.btn:nth-child(1):hover {
background-color: #e74c3c; /* hover color to red */
transform: scale(1.1) rotate(10deg); /* uncomment for rotate effect */
}
.btn:nth-child(2) {
transition: background-color 0.5s, transform 0.5s, skew(0.5s);
}
.btn:nth-child(2):hover {
background-color: #2ecc71; /* hover color to green */
transform: scale(1.1) skew(10deg);
}
.btn:nth-child(3) {
transition: background-color 0.5s, transform 0.5s, translate(0.5s);
}
.btn:nth-child(3):hover {
background-color: #9b59b6; /* hover color to purple */
transform: scale(1.1) translate(10px, 10px);
}
.image {
height: 80vh;
background-size: 100vw 100vh;
animation: picture 12s linear infinite;
background-repeat: no-repeat;
}
@keyframes picture {

35
0% {
background-image: url("mclaren.jpg");
}
20% {
background-image: url("mclaren2.jpg");
}
40% {
background-image: url("ferrari.jpg");
}
}
</style>
</head>
<body>
<div class="nav">
<button class="btn">ferrari</button>
<button class="btn">mclaren</button>
<button class="btn">mclaren senna</button>
</div>
<div class="image"></div>
</body>
</html>
OUTPUT:

36
37
LAB 8:
AIM: Create a html document with 3 divs and images apply transforms for each div & create
another div write self-introduction apply animations for the text
CODE:
<html>
<head>
<title>My Introduction</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
}

.image-container {
display: flex;
justify-content: space-around;
width: 100%;
margin-bottom: 20px;
}

.image-container div {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures images fill the container */
transition: transform 0.5s ease-in-out; /* Smooth transition on hover */
}

38
.image-container div:hover img {
transform: scale(1.1); /* Zoom on hover */
}

.intro {
background-color: #f0f0f0;
padding: 20px;
animation: intro 3s ease-in-out forwards;
}

@keyframes intro {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="image-container">
<div>
<img src="mclaren.jpg" alt="Image 1">
</div>
<div>
<img src="mclaren2.jpg" alt="Image 2">
</div>
<div>
<img src="ferrari.jpg" alt="Image 3">
</div>
</div>

<div class="intro">
Hi! My name is Rishitha.I'm studying btech currently </div>
</body>
</html>

39
OUTPUT:

40
LAB 9:
AIM: JAVASCRIPT
a) Write a JavaScript program to determine if a number is even or odd
b) Write a JavaScript program to determine if a number is prime or not
c)Write a JavaScript program to find the factorial of a given number
d)Write a JavaScript program to find the given; number is Armstrong or not
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even or Odd Checker</title>
</head>
<body>
<h1>Even or Odd Checker</h1>
<p>Enter a number below to check if it's even or odd:</p>
<input type="number" id="numberInput">
<button onclick="checkEvenOrOdd()">Check</button>
<p id="result"></p>

<script>
function checkEvenOrOdd() {
let number = parseInt(document.getElementById('numberInput').value);

if (isNaN(number)) {
document.getElementById('result').innerText = "Please enter a valid number.";
} else {
if (number % 2 === 0) {
document.getElementById('result').innerText = "Even";
} else {
document.getElementById('result').innerText = "Odd";
}
}
}
</script>
</body>
41
</html>
OUTPUT:

b)CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Number Checker</title>
</head>
<body>
<h1>Prime Number Checker</h1>
<label for="number">Enter a number:</label>
<input type="number" id="number">
<button onclick="checkPrime()">Check Prime</button>
<p id="result"></p>

<script>
function checkPrime() {
const number = parseInt(document.getElementById('number').value);

if (number < 2) {
document.getElementById('result').innerText = `${number} is not prime.`;
return;
}

for (let i = 2; i <= Math.sqrt(number); i++) {


if (number % i === 0) {
document.getElementById('result').innerText = `${number} is not prime.`;
return;
}
}

document.getElementById('result').innerText = `${number} is prime.`;

42
}
</script>
</body>
</html>

OUTPUT:

c)CODE:
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<h1>Factorial Calculator</h1>
<input type="number" id="num" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate</button>
<p id="result"></p>

<script>
function calculateFactorial() {
const num = document.getElementById("num").value;
let result = 1;
for (let i = 2; i <= num; i++) {
result *= i;
}
document.getElementById("result").innerHTML = `The factorial of ${num} is ${result}`;
}
</script>
</body>
</html>

43
OUTPUT:

d)CODE:
<html>
<head>
<title>Armstrong Number Checker</title>
</head>
<body>
<h1>Armstrong Number Checker</h1>
<input type="number" id="num" placeholder="Enter a number">
<button onclick="checkArmstrong()">Check</button>
<p id="result"></p>

<script>
function checkArmstrong() {
const num = document.getElementById("num").value;
const numStr = num.toString();
const numLen = numStr.length;
let sum = 0;

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


sum += Math.pow(parseInt(numStr[i]), numLen); // Corrected here!
}

if (sum === parseInt(num)) { // Also, parse the num to int for comparison
document.getElementById("result").innerHTML = `${num} is an Armstrong number`;
} else {
document.getElementById("result").innerHTML = `${num} is not an Armstrong number`;
}
}
</script>
</body>
</html>

44
OUTPUT:

45
LAB 10:
All Programs execute with DOM
Create a text box for taking input and a button for getting output. The respective action will be
handled when the button is clicked.
AIM: Write a JS program for Spy Number (Sum and Products of Digits are same)

CODE:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Spy Number Checker</title>

</head>

<body>

<h1>Spy Number Checker</h1>

<label for="numberInput">Enter a number:</label>

<input type="text" id="numberInput">

<button onclick="checkSpyNumber()">Check</button>

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

<script>

function isSpyNumber(num) {

// Convert the number to a string to iterate over each digit

const numStr = num.toString();

let sum = 0;

let product = 1;

// Loop through each digit

46
for (let char of numStr) {

const digit = parseInt(char, 10); // Convert the character back to an integer

sum += digit;

product *= digit;

return sum === product;

function checkSpyNumber() {

const input = document.getElementById('numberInput').value;

const number = parseInt(input, 10);

// Validate input

if (isNaN(number)) {

document.getElementById('result').textContent = 'Please enter a valid number.';

return;

const result = isSpyNumber(number) ? `${number} is a Spy Number.` : `${number} is not a


Spy Number.`;

document.getElementById('result').textContent = result;

</script>

</body>

</html>

Output:

47
2)Write a JS program to Check if the given number is a perfect square

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Perfect Square Checker</title>

</head>

<body>

<h1>Perfect Square Checker</h1>

<label for="numberInput">Enter a number:</label>

<input type="text" id="numberInput">

<button onclick="checkPerfectSquare()">Check</button>

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

<script>

function isPerfectSquare(num) {

if (num < 0) return false;

const sqrt = Math.sqrt(num);

return sqrt === Math.floor(sqrt);

48
function checkPerfectSquare() {

const input = document.getElementById('numberInput').value;

const number = parseFloat(input);

// Validate input

if (isNaN(number)) {

document.getElementById('result').textContent = 'Please enter a valid number.';

return;

const result = isPerfectSquare(number) ? `${number} is a perfect square.` : `${number} is not


a perfect square.`;

document.getElementById('result').textContent = result;

</script>

</body>

</html>

Output:

3)Write a JS program for Sum of the digits of a given number

CODE:

<!DOCTYPE html>

<html lang="en">

49
<head>

<meta charset="UTF-8">

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

<title>Sum of Digits Calculator</title>

</head>

<body>

<h1>Sum of Digits Calculator</h1>

<label for="numberInput">Enter a number:</label>

<input type="text" id="numberInput">

<button onclick="calculateSumOfDigits()">Calculate</button>

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

<script>

function sumOfDigits(num) {

// Convert the number to a string to iterate over each digit

const numStr = num.toString();

let sum = 0;

// Loop through each digit and add to sum

for (let char of numStr) {

const digit = parseInt(char, 10); // Convert the character back to an integer

sum += digit;

return sum;

function calculateSumOfDigits() {

50
const input = document.getElementById('numberInput').value;

const number = parseInt(input, 10);

// Validate input

if (isNaN(number)) {

document.getElementById('result').textContent = 'Please enter a valid number.';

return;

const result = `The sum of the digits of ${number} is ${sumOfDigits(number)}.`;

document.getElementById('result').textContent = result;

</script>

</body>

</html>

Output:

4)Write a JS program to find the sum and difference of two numbers

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum and Difference Calculator</title>

51
</head>
<body>
<h1>Sum and Difference Calculator</h1>
<label for="number1Input">Enter the first number:</label>
<input type="text" id="number1Input">
<br>
<label for="number2Input">Enter the second number:</label>
<input type="text" id="number2Input">
<br>
<button onclick="calculateSumAndDifference()">Calculate</button>
<p id="result"></p>

<script>
function calculateSumAndDifference() {
const input1 = document.getElementById('number1Input').value;
const input2 = document.getElementById('number2Input').value;
const number1 = parseFloat(input1);
const number2 = parseFloat(input2);

// Validate input
if (isNaN(number1) || isNaN(number2)) {
document.getElementById('result').textContent = 'Please enter valid numbers.';
return;
}

const sum = number1 + number2;


const difference = number1 - number2;

const result = `The sum of ${number1} and ${number2} is ${sum}. The difference between
${number1} and ${number2} is ${difference}.`;
document.getElementById('result').textContent = result;
}
</script>
</body>
</html>

52
Output:

53

You might also like