Scribd
Upload
8 views

aabid webdev

Web Design Projects on Basic Level

Uploaded by

Mohammad Aabid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

aabid webdev

Web Design Projects on Basic Level

Uploaded by

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

A PRACTICAL FILE

ON

Web Design Lab

BCA-507P

The Study Hall College

Affiliated To

UNIVERSITY OF LUCKNOW

Course
Bachelors in Computer Application
2024-2025

SUBMITTED TO: SUBMITTED BY:


Mrs. Priyanka Singh Mohammad Aabid
2212414040027
INDEX
S. No. Topic Page No. Signature

1 HTML program to create a time table 1

2 HTML program for form creation 5

3 HTML program to create resume using tables 8

4 XML program 11

5 Restaurant Homepage using HTML and CSS 12

6 Simple Calculator 21

7 Temperature Converter 22

8 Age Validator 23

9 Simple Form with JavaScript 24

10 Checking a number is even or odd using JavaScript 25


STUDY HALL COLLEGE Web Design Lab 2024
1. HTML program to create a time table :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.green{
background-color: rgb(28, 211, 83);
}
.pink{
background-color: pink;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.grey{
background-color: rgb(151, 151, 151);
}
</style>
</head>
<body>

<table border="1" cellpadding="8" cellspacing="1">


<caption class="green" >BCA V Semester</caption>
<caption>Class Advisor- Dr. Naval Kishore Gupta</caption>
<tr>
<th class="grey">BCA V</th>
<th class="grey">Period 1 <br> 9:15-10:15</th>
<th class="grey">Period 2 <br> 10:15-11:15</th>
<th class="grey">Period 3 <br> 11:15-12:15</th>
<th class="grey">Lunch <br> Break <br> 12:15-1:00</th>
<th class="grey">Period 5 <br> 1:00-2:00</th>
<th class="grey">Period 6 <br> 2:00-3:00</th>
</tr>
<tr>
<th class="grey">
MONDAY
</th>
<td>
Mr. Jaun <br> - <br> Linux
</td>

<td class="green">
Ms. Priyanka <br>- <br> LAB-WebDesigin
</td>
<td class="green">
Ms. Priyanka <br>- <br> LAB-WebDesigin
</td>
<td class="grey">
</td>
<td>
Mr. Jaun <br> - <br> Elective
</td>
<td>
Ms. Priyanka <br>- <br> Data Communication and Computer Network
1
STUDY HALL COLLEGE Web Design Lab 2024

</tb>
</tr>
<tr>
<th class="grey">
TUESDAY
</th>
<td>
Mrs. Archana <br> - <br> DDA
</td>

<td>
Mr. Jaun <br>- <br> LAB-Unix
</td>
<td >
Mr. Jaun <br>- <br> LAB-Unix
</td>
<td class="grey">
</td>
<td>
Ms. Priyanka <br>- <br> Web Desigin
</td>
<td>
Ms. Priyanka/Mr. Jaun <br>- <br> Elective
</td>
</tr>
<tr>
<th class="grey">
WEDNESDAY
</th>
<td>
Mr. Jaun <br>- <br> Unix
</td>

<td>
Ms. Priyanka <br>- <br> Data Communication and Computer Network
</td>
<td >
Ms. Priyanka <br>- <br> Data Communication and Computer Network
</td>
<td class="grey">
</td>
<td>
Ms. Priyanka/Mr. Jaun <br>- <br> Elective
</td>
<td class="pink">
Mr. Naval <br>- <br> Remedial Mathematics <br>& <br> Semester-iii Backpaper
</td>
</tr>
<tr>
<th class="grey">
THURSDAY
</th>
<td>
Ms. Priyanka <br>- <br> Web Desigin
</td><td>
Mrs. Archana <br> - <br> DDA
</td>
<td >
Mr. Jaun <br>- <br> Unix

2
STUDY HALL COLLEGE Web Design Lab 2024

<td class="grey">
</td>
<td class="green">
Ms. Archana/Mr. Jaun <br>- <br> LAB-Industrial Viva and training
</td>
<td class="green">
Ms. Archana/Mr. Jaun <br>- <br> LAB-Industrial Viva and training
</td>
</tr>
<tr>
<th class="grey">
FRIDAY
</th>
<td>
Ms. Priyanka <br>- <br> Web Desigin
</td>

<td>
Mr. Jaun <br>- <br> Unix
</td>
<td >
Mrs. Archana <br> - <br> DDA
</td>
<td class="grey">
</td>
<td class="blue">
Sports-Mr. Jaun <br> / <br> Library-Mr.Jaun <br>/ <br> Activity-Mr. Jaun
</td>
<td class="pink">
Mr. Naval <br>- <br> Remedial Mathematics <br>& <br> Semester-iii Backpaper
</td>
</tr>
<tr>
<th class="grey">
SATURDAY
</th>
<td>
Ms. Priyanka <br>- <br> Web Desigin
</td>

<td class="yellow">
Critical Dialouge(Dr. <br> Naval sir / <br> Dr. Neha)
</td>
<td >
Mrs. Archana <br> - <br> DDA
</td>
<td class="grey">
</td>
<td>
Ms. Priyanka / Mr. Jaun <br> - <br> Elective
</td>
<td>
Ms. Priyanka <br>- <br> Data Communication and Computer Network
</td>
</tr>
</table>
</body>
</html>

3
STUDY HALL COLLEGE Web Design Lab 2024

4
STUDY HALL COLLEGE Web Design Lab 2024

2. HTML program for form creation


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name</label></td>
<td><input type="text" name="name" id="register_name" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter Password
:</label></td>
<td><input type="password" name="password" id="register_password"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
<td><input type="email" name="email" id="register_email" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Select Gender:</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">Male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">Female</label>
<input type="radio" name="gender" id="register_other" value="other"/>
<label for="register_other">other</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
<td>
<select name="country" id="register_country" style="width:160px">
<option value="Afghanistan">Afghanistan</option>

5
STUDY HALL COLLEGE Web Design Lab 2024
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Bahamas">Bahamas</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belgium">Belgium</option>
<option value="Bhutan">Bhutan</option>
<option value="Canada">Canada</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Columbia">Columbia</option>
<option value="Denmark">Denmark</option>
<option value="Egypt">Egypt</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Holy see">Holy see</option>
<option value="India">India</option>
<option value="Indonasia">Indonasia</option>
<option value="Iran">Iran</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Kuwait">Kuwait</option>
<option value="Luxumberg">Luxumberg</option>
<option value="Mexico">Mexico</option>
<option value="Nepal">Nepal</option>
<option value="Pakistan">Pakistan</option>
<option value="Russia">Russia</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" style="width: 200px"
value="Register"/>
</div></td>
</tr>
</table>
</form>
</body>
</html>

6
STUDY HALL COLLEGE Web Design Lab 2024

Output

7
STUDY HALL COLLEGE Web Design Lab 2024

3. HTML program to create resume using tables

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
<style>
body {
font-family: Arial, sans-serif; margin: 20px;
background-color: #f4f4f4; color: #333;
}
table {
width: 100%;
border-collapse: collapse; margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd; padding: 8px;
text-align: left;
}
th {
background-color: #7582f7; color: white;
}
h1 {
text-align: center; color: #333;
}
.section-title {
background-color: #f2f2f2; padding: 10px;
font-size: 1.5em; margin-top: 20px;
}
.profile { display: flex;
align-items: center; margin-bottom: 20px;
}
.profile img {
border-radius: 50%;
width: 100px; /* Adjust size as needed */ height: 100px; /* Adjust size as needed */
margin-right: 20px;
}
</style>
</head>
<body>
<div class="profile">
<img src="C:\Users\Aman Srivastava\Desktop\aabid.jpg" alt="Profile Picture"> <!--
Replace with your image path -->
<div>
<h1>Mohammad Aabid</h1>
<p>Email:[email protected] | Phone:9956258970 | LinkedIn:
https://github.com/MohammadAabid951</p>
</div>

8
STUDY HALL COLLEGE Web Design Lab 2024

</div>

<div class="section-title"> Summary</div>


<P>
Motivated and hardworking BCA graduate with a strong foundation in IT concepts and
a keen interest in technology.
Possesses solid problem-solving skills and the ability to quickly adapt to new tools and
environments.
Eager to contribute to a dynamic team and grow professionally in the IT sector.
Looking for an entry-level position to apply knowledge and develop new skills in a
challenging and supportive environment.
</P>

<div class="section-title">Education</div>
<table>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>Bachelor of computer application</td>
<td>The study hall college,lucknow</td>
<td>2023-25</td>
</tr>
<tr>
<td>Senior secondary education</td>
<td>Army Public School, Nehru Road, LUCKNOW</td>
<td>2021</td>
</tr>
<tr>
<td>Secondary school education</td>
<td>Army Public School, Nehru Road, LUCKNOW</td>
<td>2019</td>
</tr>
</table>

<div class="section-title">Skills</div>
<table>
<tr>
<th>Technical Skills</th>
</tr>
<tr>
<td>HTML, CSS, MERN Stack</td>
</tr>
<tr>
<th>Soft Skills</th>
</tr>

9
STUDY HALL COLLEGE Web Design Lab 2024

<tr>
<td>Teamwork, Communication, Problem-solving, Adaptability</td>
</tr>
</table>
<div class="section-title">Projects</div>
<table>
<tr>
<th>Project Title</th>
<th>Description</th>
<th>Technologies</th>
</tr>
<tr>
<td>Personal Portfolio Website</td>
<td>A responsive portfolio showcasing my projects and skills.</td>

<td>HTML, CSS, MERN Stack</td>


</tr>
<tr>
<td>Recipe App</td>
<td>An application that provides recipe of foods based on ingredients.</td>
<td>HTML, CSS, MERN Stack</td>
</tr>
</table>

</body>
</html>

10
STUDY HALL COLLEGE Web Design Lab 2024

4. XML Program

 File.xml

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

 note.dtd

<!ELEMENT note (to ,from ,heading , body)>


<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

11
STUDY HALL COLLEGE Web Design Lab 2024

5. Restaurant Home page using HTML and CSS.

Index.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Restraunt Sites
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-
Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UM
g5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
*{
margin: 0;
padding: 0;
}

.social-sites {
height: 100vh;
width: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}

a{
height: 400px;
width: 400px;
background-color: black;
border-radius: 50px;
text-align: center;
line-height: 110px;
margin: 10px;
box-shadow: 1px 4px 2px 2px #dcdde1;

a i{
transition: all 0.3s linear;
}

a:hover i {
transform: scale(1.4);
}
</style>
</head>

<body>
<header>
<div id="nav">
<div class="logo">
<img src="images/McDonalds.jpeg" alt="Logo img">

12
STUDY HALL COLLEGE Web Design Lab 2024
</div>
<ul type="none">
<li>Home</li>
<li>Menu</li>
<li>About us</li>
<li>Contact us</li>
</ul>
<div class="inp">
<input type="text">
<button>Search</button>
</div>
</div>
<div id="main">
<div id="black">
<h1 style="text-align: center;">Welcome to UpadhyayRestraunt-The best dining
experience!"</h1>
<h1 style="text-align: center;">Foodies!! lets choose your meal</h1>
<h1 style="text-align: center;">Offer always available for daily Customer</h1>
<h1 style="text-align: center;">100% Hygenic food</h1>
<h1 style="text-align: center;">Visit my restraunt</h1>
<button>ORDER NOW</button>
</div>
</div>
<div id="Intro">
<pre>
The restaurant, established over 20 years ago, started as a family-owned spot and quickly became a
local favorite.
Specializing in a fusion of classic and contemporary cuisine, it offers standout seafood
dishes and seasonal, locally sourced ingredients. The atmosphere combines elegance and warmth,
providing a comfortable
yet refined dining experience for all occasions.
</pre>
</div>
</div>
<div id="starter">
<h1>Start from starter...</h1>
<div class="Bada_box">
<div class="box">
<img src="./images/PannerT.jpeg">
<h3>Panner Tikka</h3>
</div>
<div class="box">
<img src="./images/chicken satay.jpeg">
<h3>chicken satay</h3>
</div>
<div class="box">
<img src="./images/hummus.jpeg">
<h3>hummus</h3>
</div>
<div class="box">
<img src="./images/bruschetta.jpeg">
<h3>bruschetta</h3>
</div>
<div class="box">
<img src="./images/hara bhra kabab.jpeg">
<h3>hara bhra kabab</h3>
</div>
</div>
</div>
</div>
<!-- ...Menu -->

13
STUDY HALL COLLEGE Web Design Lab 2024
<div id="Menu">
<h1>Many items available here ... </h1>
<h1>Choose your meal... </h1>
<div class="Bada_box">
<div class="box">
<img src="./images/chowy.jpeg">
<h3>Chowmein</h3>
</div>
<div class="box">
<img src="./images/burger.jpeg">
<h3>Burger</h3>
</div>
<div class="box">
<img src="./images/momos.jpeg">
<h3>Momos</h3>
</div>
<div class="box">
<img src="./images/fry.jpeg">
<h3>french Fry</h3>
</div>
</div>
<div class="Bada_box">
<div class="box">
<img src="./images/kbab.jpeg">
<h3>Kabab Pratha</h3>
</div>
<div class="box">
<img src="./images/biryani.jpeg">
<h3>Biryani</h3>
</div>
<div class="box">
<img src="./images/pizza.jpeg">
<h3>pizza</h3>
</div>
<div class="box">
<img src="./images/manchurian.jpeg">
<h3>manchurian</h3>
</div>
</div>
<div class="Bada_box">
<div class="box">
<img src="./images/soup.jpeg">
<h3>soup</h3>
</div>
<div class="box">
<img src="./images/mojito.jpeg">
<h3>mojito</h3>
</div>
<div class="box">
<img src="./images/vda pav.jpeg">
<h3>vda pav</h3>
</div>
</div>
</div>

<!-- < ...Drink Section..> -->


<div id="Famous_Drinks">
<h1>Drinks, that complete your thirst.. </h1>

<div class="Bada_box">

14
STUDY HALL COLLEGE Web Design Lab 2024
<div class="box">
<img src="./images/martini.jpeg">
<h3>martini</h3>
</div>
<div class="box">
<img src="./images/sex on the beach.jpeg">
<h3>Cocktail</h3>
</div>
<div class="box">
<img src="./images/daiquiri.jpeg">
<h3>daiquiri</h3>
</div>
</div>
<div class="Bada_box">
<div class="box">
<img src="./images/passion friut martini.jpeg">
<h3>passion friut martini</h3>
</div>
<div class="box">
<img src="./images/old fasioned.jpeg">
<h3>old fashioned</h3>
</div>
<div class="box">
<img src="./images/old fasioned.jpeg">
<h3>old fashioned</h3>
</div>
</div>
</div>
<!-- ...Testinomial... -->
<div class="test">
<div class="t1">
<h1 style="text-align: center;">Testinomial</h1>
</div>
</div>

<div class="rat">
<div class="bx">
<div class="quote">
<p>Wanted to say a huge thank you for last night. It was truly spectacular.
The food was amazing, the service impeccable. It could not have been any better.
All the visiting delegates were blown away. Honestly the best Skal International Event I have
been to. Thank you.</p>

</div>
<p><b>Tina M</b></p>
</div>
</div>
<div class="rat">
<div class="bx">
<div class="quote">
<p>Great food and service. Long time neighborhood restaurant and St Louis tradition.
</div>
<p><b>Mary Ellen W</b></p>
</div>
</div>
<div class="rat">
<div class="bx">
<div class="quote">
<p>We attended a holiday banquet here this evening.
The banquet room is decorated very nicely for the Christmas season.
The service was great and the food was excellent. This was my first time to visit this

15
STUDY HALL COLLEGE Web Design Lab 2024
restaurant, but it will not be my last!
</div>
<p><b>Arbie V</b></p>
</div>
</div>
<div class="rat">
<div class="bx">
<div class="quote">
<p>We had both of our sons' wedding rehearsal dinners at Pietros.
It was all very nice, and the owners were very helpful. Great food - very nice people !!
</div>
<p><b>Jason R</b></p>
</div>
</div>
</header>
<footer>
<div id="form">
<h1>Contact us</h1>
<div class="sd">
<label for="" class="info">Name:</label><input type="text" name="" id="">
<label for="" class="info">Email:</label>
<input type="text" name="" id="">
<label for="" class="info">Phone number:</label>
<input type="text" name="" id="">
<label for="" class="info"> Message:</label>
<textarea name="" id=""></textarea>
<button>submit</button>
</div>
<div class="ik">
<a href="">
<i class="fa-brands fa-whatsapp"></i>
</a>
<a href="">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>

</footer>
</body>

</html>
Style.css
*{
margin: 0;
padding: 0;
}
#nav{
display: flex;
gap: 70px;
background-color: rgb(26, 23, 23);

}
#nav input{
margin: 10px;
margin-right: 0px;
height: 40px;
width: 500px;

16
STUDY HALL COLLEGE Web Design Lab 2024
border-radius: 5px;
}
#nav button{
height: 35px;
width: 70px;
margin-left: 0px;
border-radius: 5px;
background-color: aqua;
color:rgb(12, 12, 12)
}
#nav ul{
display: flex;
gap: 50px;
margin: 14px;
font-size: 25px;
color: white;
}
.logo img{
height: 50px;
width: 70px;
margin: 5px 2px 1px 5px;
}
.inp input{
border-color: none;
}
.inp input:hover{
border-color: rgb(255, 115, 0);
border-radius: 150px;

}
#nav ul li:hover{
color: rgb(238, 102, 125);
text-decoration: underline;
}
#main{
background: url("images/pexels-pixabay-260922.jpg") no-repeat center center/cover;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-style: oblique;
gap: 5px;
color:white;
}
#black{
padding: 20px 20px 20px 50px;
background-color: black;
}
#black button{
margin-top: 10px;
margin-left: 360px;
}
#main button{
background-color: red;
color: yellow;
height: 50px;
width: 100px;
}
#Intro {
background-color: black;

17
STUDY HALL COLLEGE Web Design Lab 2024
margin-top: 15px;
font-size: 20px;
color: white;
}
.Bada_box{
display: flex;
overflow: auto;
}
#Menu {
margin-top: 27px;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 15px;
padding: 15px;
border-radius: 20px;
}
.box img{
width: 300px;
height:168px;
}
#Intro {
padding-top: 30px;
padding-bottom: 10px;
}
#starter, #Menu,#Famous_Drinks h1{
margin-left: 20px;
}
.test {
background: url('images/pexels-fotios-photos-776538.jpg') no-repeat center center/cover;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-style: oblique;
gap: 5px;
color:white;
font-size: 50px;
}
.t1{
background-color: black;
padding: 20px 150px 20px 150px;
}
.rat{
padding: 20px;
border: 10px solid rgba(0, 0, 0, .05);
background-color: #fff;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
border-radius: 3px
}
.bx{
padding: 20px;
border: 1px solid rgba(0, 0, 0, .05);
background-color: #fff;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

18
STUDY HALL COLLEGE Web Design Lab 2024
border-radius: 3px
}
.quote{
margin:10px 10px 20px 10px;
color:#777777;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
Verdana, sans-serif;
}
.bx b{
font-size: 14px ;
}
#form{
/* background-color: black;
width:1500px;
height:400px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24px;
margin-top: 20px; */
background-color: black;
color: #fff;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
padding-top:40px;
width: 1500px;
height:400px;
}
.sd{
height: 200px;
width: 150px;
font-size: 20px;
}
.info{
margin-top: 10px;
margin-bottom: 10px;
}
#form h1{
font-size: 50px;
margin-bottom: 10px;
}
/* #logo img{
height: 50px;
width: 70px;
margin: 5px 2px 1px 5px;
} */

19
STUDY HALL COLLEGE Web Design Lab 2024

20
STUDY HALL COLLEGE Web Design Lab 2024

6. Simple Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<h2>Simple Calculator</h2>
<form id="calculatorForm">
<input type="number"id= "num1"placeholder="First Number"required>
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="number"id= "num2"placeholder="Second Number"required>
<button type="button" onclick="calculate()">Calculate</button>
</form>

<p id="calcResult"></p>

<script>
function calculate(){
const num1= parseFloat(document.getElementById('num1').value);
const num2= parseFloat(document.getElementById('num2').value);
const operation= document.getElementById('operation').value;
let result;

switch(operation){
case"add":result=num1+num2; break;
case"subtract":result=num1-num2; break;
case"multiply":result=num1*num2; break;
case"divide":result=num1/num2; break;
}

document.getElementById('calcResult').innerText=Result: ${result};
}
</script>
</body>
</html>

21
STUDY HALL COLLEGE Web Design Lab 2024

7. Temperature Converter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Converter</title>
</head>
<body>
<h2>Temperature Converter</h2>
<form id="tempForm">
<input type="number" id="temp"placeholder="Enter Temperature" required>
<select id="tempUnit">
<option value="C">Celsius</option>
<option value="F">Fahrenheit</option>
</select>
<button type="button" onclick="convertTemp()">Convert</button>
</form>

<p id="tempResult"></p>

<script>
function convertTemp(){
const temp=parseFloat(document.getElementById('temp').value);
const unit=document.getElementById('tempUnit').value;
let result;

if(unit==="C"){
result=(temp*9/5)+32;
document.getElementById('tempResult').innerText=${temp}C is ${result}F;
}else{
result=(temp-32)*5/9;
document.getElementById('tempResult').innerText=${temp}Fis ${result}C;
}
}
</script>
</body>
</html>

22
STUDY HALL COLLEGE Web Design Lab 2024

8. Age Validator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Validator</title>
</head>
<body>
<h2>Age Validator</h2>
<form id="ageForm">
<label for="age">Enter your Age:</label>
<input type="number" id="age"required>
<button type="button" onclick="validateAge()">Check</button>
</form>

<p id="ageResult"></p>

<script>
function validateAge(){
const age=parseInt(document.getElementById('age').value);
if(age>=18){
document.getElementById('ageResult').innerText="You are an adult";
}else{
document.getElementById('ageResult').innerText="You are not an adult.";
}
}
</script>
</body>
</html>

23
STUDY HALL COLLEGE Web Design Lab 2024

9. Simple Form with Javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form with javascript</title>
<script>
function displayMessage(){
var name =document.getElementById("name").value;
var age =document.getElementById("age").value;

var message="Hello "+name+" ,you are "+age+" years old! ";


document.getElementById("output").innerHTML=message;
}
</script>
</head>
<body>
<h2>Simple Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>

<input type="button" value="Submit" onclick="displayMessage()"><br><br>


</form>

<p id="output"></p>
</body>
</html>

24
STUDY HALL COLLEGE Web Design Lab 2024

10. Checking a number is even or odd using Javascript

<!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>

<script>
function checkEvenOrOdd() {
const input = prompt("Please enter a number:");
const number = parseInt(input);

if (isNaN(number)) {
console.log('Please enter a valid number.');
return;
}

if (number % 2 === 0) {
console.log(${number} is even.);
} else {
console.log(${number} is odd.);
}
}

checkEvenOrOdd();
</script>

</body>
</html>

25

You might also like