Scribd
Upload
17 views43 pages

FSWD Till Week 4

The document outlines a laboratory experiment conducted at Vasavi College of Engineering focusing on creating a website using HTML5. It covers features of HTML5, including multimedia support and form enhancements, and provides examples of HTML code for webpage navigation and a timetable display. Additionally, it includes a design for a news site layout with articles, images, and advertisements.

Uploaded by

omkarkoty2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views43 pages

FSWD Till Week 4

The document outlines a laboratory experiment conducted at Vasavi College of Engineering focusing on creating a website using HTML5. It covers features of HTML5, including multimedia support and form enhancements, and provides examples of HTML code for webpage navigation and a timetable display. Additionally, it includes a design for a news site layout with articles, images, and advertisements.

Uploaded by

omkarkoty2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

VASAVI COLLEGE OF ENGINEERING

(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

EXPERIMENT – 1
Creation of a website using HTML5

1. What are the features of HTML5?


Ans: HTML stands for Hypertext Markup Language. Some features of HTML5 are:
-> Multimedia Support: Audio and Video Tags to embed audio and video in webpages.
-> Header and Footer tags
-> HTML Nav tag to set a list of navigation links.
-> Form enhancement tags: input type, placeholder attribute, pattern attribute
-> Application Cache mechanism

2. Write a meta tag to refresh the page every 5 seconds.


Ans: We can use the http-equiv attribute along with content attribute to refresh the page every 5
seconds as follows:
<meta http-equiv="refresh" content="5">
Here, http-equiv used to simulate an HTTP response header and content=”5” tells the browser
to refresh every 5 seconds.
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

3. Write a program to navigate to a respective chapter content on clicking a chapter name


within a page?
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table of Contents</title>
</head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
</style>
<body align="center">
<br> <h1>Java Collections</h1>
<h2><u>Contents</u></h2>
<br> <table align="center" cellpadding="8">
<tr>
<th align="center">Sno</td>
<th align="center">Chapter name</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center"><a href="#stack">Stack</a></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center"><a href="#priorityqueue">PriorityQueue</a></td>
</tr>
<tr>
<td align="center">3</td>
<td align="center"><a href="#linkedlist">LinkedList</a></td>
</tr>
<tr>
<td align="center">4</td>
<td align="center"><a href="#hashset">HashSet</a></td>
</tr>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<tr>
<td align="center">5</td>
<td align="center"><a href="#hashmap">HashMap</a></td>
</tr>
<tr>
<td align="center">6</td>
<td align="center"><a href="#treeset">TreeSet</a></td>
</tr>
</table>
<div id="stack" style="border:1px">
<h4>Stack</h4>
<p>A stack is a linear data structure that follows the LIFO (Last In First Out) principle.</p>
</div>
<div id="priorityqueue">
<h4>PriorityQueue</h4>
<p>A PriorityQueue is a special type of queue in which elements are ordered based on their
priority.</p>
</div>
<div id="linkedlist">
<h4>LinkedList</h4>
<p>A LinkedList is a linear data structure where elements are stored in nodes, with each
node containing a reference to the next node.</p>
</div>
<div id="hashset">
<h4>HashSet</h4>
<p>A HashSet is a collection that contains no duplicate elements and is backed by a hash
table.</p>
</div>
<div id="hashmap">
<h4>HashMap</h4>
<p>A HashMap is a collection that maps keys to values, with no duplicate keys allowed.</p>
</div>
<div id="treeset">
<h4>TreeSet</h4>
<p>A TreeSet is a NavigableSet implementation based on a TreeMap, which provides a total
ordering on its elements.</p>
</div></body></html>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

4. Design a webpage to display time table of your class


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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE-A Timetable</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
</style>
</head>
<body>
<img src="./images/VCELOGO.gif" style="float: left; margin-right: 10px;" width="100" ></img>
<h2 align="center">VASAVI COLLEGE OF ENGINEERING (AUTONOMOUS)</h2>
<h4 align="center">Ibrahimbagh, Hyderabad</h4>
<h3 align="center">DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING</h3>
<h4 align="center"><u>TIMETABLE (ROOM NO R-301)</u></h4>
<h4 align="center"><u>CLASS : B.E. V-SEMESTER (CSE-A)</u></h4>
<div align="left">YEAR: 2024-25</div>
<div align="right">w.e.f 05.08.2024</div>
<table align="center">
<tr>
<td align="center">TIME/DAY</td>
<td align="center">9.40 AM TO 10.40 AM</td>
<td align="center">10.40 AM TO 11.40 AM</td>
<td align="center">11.40 AM TO 12.40 PM</td>
<td align="center">12.40 PM TO 01.20 PM</td>
<td align="center">01.20 PM TO 02.20 PM</td>
<td align="center">02:20 PM TO 03.20 PM</td>
<td align="center">03.20 PM TO 04.20 PM</td>
</tr>
<tr>
<td align="center">MON</td>
<td align="center">FSWD</td>
<td align="center">EFE</td>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<td align="center">Mentor/ALC</td>
<td align="center" rowspan="6">LUNCH</td>
<td align="center">CN</td>
<td align="center" colspan="2">MP(CISCO) [LAB V]</td>
</tr>

<tr>
<td align="center">TUE</td>
<td align="center">FSWD</td>
<td align="center">AI</td>
<td align="center">ALC</td>
<td align="center" colspan="2">AIML LAB [LAB VI]</td>
<td align="center">SPORTS/LIBRARY</td>
</tr>
<tr>
<td align="center">WED</td>
<td align="center">AI</td>
<td align="center" colspan="2">SDC-V (CS-II)</td>
<td align="center">OE</td>
<td align="center">CN</td>
<td align="center">ALC</td>
</tr>
<tr>
<td align="center">THU</td>
<td align="center">OE</td>
<td align="center">AI</td>
<td align="center">ALC</td>
<td align="center">FSWD</td>
<td align="center" colspan="2">CCA-III</td>
</tr>
<tr>
<td align="center">FRI</td>
<td align="center">OE</td>
<td align="center" colspan="2">FSWD LAB [LAB-VI]</td>
<td align="center">CN</td>
<td align="center" colspan="2">SDC-VI(TS-III)</td>
</tr>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<tr>
<td align="center">SAT</td>
<td align="center" colspan="2">CN LAB [LAB-VII]</td>
<td align="center">EFE</td>
<td align="center" colspan="2">ECA-II</td>
<td align="center">CN</td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td colspan="3">FSWD (FULL STACK WEB DEVELOPMENT)</td>
<td><a href="https://www.vce.ac.in/Faculty_Details.cshtml?id=1587">S. Vinay
Kumar</a></td>
<td>SDC-V (Communication skills-II)</td>
<td>Lucy Supam</td>
</tr>
<tr>
<td colspan="3">CN (Computer Networks)</td>
<td><a href="https://www.vce.ac.in/Faculty_Details.cshtml?id=1437">Dr. M. Jithender
Reddy</a></td>
<td>SDC-VI (Technical skills-III)</td>
<td></td>
</tr>
<tr>
<td colspan="3">AI (Artificial Intelligence)</td>
<td><a href="https://www.vce.ac.in/Faculty_Details.cshtml?id=1279">Dr. T.
Adilakshmi</a></td>
<td>FSWD Lab (FULL STACK WEB DEVELOPMENT lab)</td>
<td>Fri(FN): S. Vinay, Dr. T. Sateesh Kumar, R. Sudha</td>
</tr>
<tr>
<td colspan="3">ALC (Automata, Languages and Computation)</td>
<td><a href="https://www.vce.ac.in/Faculty_Details.cshtml?id=1522">Dr. R Sateesh
Kumar</a></td>
<td>CN LAB (Computer Networks Lab)</td>
<td>Sat(FN): Dr. M. Jithender, Dr. R. Sateesh, D. Likitha</td>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

</tr>
<tr>
<td colspan="3">EFE (Economics and finance for Engineers)</td>
<td>M. Jyothi</td>
<td>AIML LAB (Artificial Intelligence and Machine Learning Lab)</td>
<td>Tue(FN): S. Komal, S. Swetha, J. Swathi</td>
</tr>
<tr>
<td rowspan="2">Open Elective-III</td>
<td></td>
<td>Fundamentals of AI</td>
<td><a href="https://www.vce.ac.in/Faculty_Details.cshtml?id=2045">S. Komal
Kour</a></td>
<td>MP (Mini Project)</td>
<td>S. Vinay Kumar, Dr. P. Kalpana</td>
</tr>
<tr>
<td></td>
<td>Introduction to OS</td>
<td><a href="https://www.vce.ac.in/Faculty_Details.cshtml?id=2255">P. Nancy
Celine</a></td>
<td>CISCO</td>
<td>Dr. M. Jithender Reddy, T. Nishitha</td>
</tr>
<tr>
<td colspan="2">Co-Curricular Activity-III</td>
<td colspan="2">Dr. P. Nagaratna Hegde, T. Sushmitha</td>
<td colspan="2">ECA-II/Sports/Library Class Coordinator: <a
href="https://www.vce.ac.in/Faculty_Details.cshtml?id=2219">Dr. P. Bhargavi Reddy</a></td>
</tr>
</table>
<p align="right">1602-22-733-031</p>
</body>
</html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

5. Design a web page that displays articles in the form of newspaper with text,
images and advertisements.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Site</title>
</head>
<body>
<h2 align="center"><u>Daily News</u></h2>
<h3>News Of the Day</h3>
<table style="border:none;" align="center" width="90%">
<tr style="background-color:bisque">
<td><img src="./images/im1.jpeg" height="125"></td>
<td><p><b>Important to instil fear, strictest punishment for crimes against women: PM
Modi</b><br>
PM Modi's remarks in his Independence Day address came amid massive protests over the rape
and murder of a trainee doctor at Kolkata's RG Kar Medical College and Hospital.</p>
</td>
</tr>
</table>
<h3>Top Stories</h3>
<table align="center" style="border:1px ; border-collapse:collapse;width:80%">
<style>th, td {border:1px solid rgb(108, 96, 96);border-collapse:collapse;}</style>
<tr>
<td><img src="./images/im2.jpeg" height="80" style="float:right;">
Probe starts against former Bangladesh PM Hasina, 9 others for genocide, crimes
against humanity </td>
<td><img src="./images/im2.jpeg" height="80" style="float:right;">
Probe starts against former Bangladesh PM Hasina, 9 others for genocide, crimes
against humanity </td>
</tr>
<tr>
<td><img src="./images/im2.jpeg" height="80" style="float:right;">
Probe starts against former Bangladesh PM Hasina, 9 others for genocide, crimes
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

against humanity </td>


<td><img src="./images/im2.jpeg" height="80" style="float:right;">
Probe starts against former Bangladesh PM Hasina, 9 others for genocide, crimes
against humanity </td>
</tr>
<tr>
<td><img src="./images/im2.jpeg" height="80" style="float:right;">
Probe starts against former Bangladesh PM Hasina, 9 others for genocide, crimes
against humanity </td>
<td><img src="./images/im2.jpeg" height="80" style="float:right;">
Probe starts against former Bangladesh PM Hasina, 9 others for genocide, crimes
against humanity </td>
</tr>
</table>
</body>
</html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

6. Create a webpage to display audio and video content with controls.


Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Multimedia</title>
</head>
<body>
<h3 align="center">Audio</h3>
<div align="center">Sooseki Song from Pushpa </div><br>
<div align="center">
<audio controls>
<source src="./audio/Sooseki.mp3" type="audio/mpeg">
</audio>
</div>
<h3 align="center">Video</h3>
<div align="center">Sooseki Video Song from Pushpa </div><br>
<div align="center" style="max-width:800px;">
<video controls width="75%">
<source src="./video/Sooseki.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

7. Design a web page to display links in a single row.


Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
</head>
<body>
<h2 align="center">Navigation Bar</h2>
<nav align="center">
<a href="/home/">Home</a> |
<a href="/profile/">Profile</a> |
<a href="/signup/">Signup</a> |
<a href="/login/">Login</a>
</nav>
</body>
</html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

EXPERIMENT – 2
Creation of a static website using HTML forms

1. What is the purpose of HTML forms?


Ans: HTML Forms is a feature in HTML that is used to collect user input through interactive controls
and submit it to a web server for processing. Forms can include various input elements such as text
fields, checkboxes, radio buttons, and submit buttons.
Common uses:
-> User registration forms
-> Survey and Opinion forms
-> Contact forms

2. Which control is best suitable if one of the multiple options (around 50 options) available?
Why? Specify the syntax of the field.
Ans: In such cases where there are multiple options, we can make a dropdown list. We can make a
dropdown list in HTML by using the <select> tag.
Ex: <select name="shirts" id="shirtcol ">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
</select>
This defines a dropdown list with 3 options: Red, Blue and Orange.

3. What is the difference between progress and meter tag?


Ans: The <progress> tag represents the completion progress of a task.
Example: <progress value="57" max="100"> </progress>

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is
also known as a gauge.
Example: <label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

4. Design a form to capture the options for open Elective courses.


Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OE Registration</title>
<style>
.oe { padding: 5px; border-collapse: collapse; border: 1px solid black; }
</style>
</head>
<body>
<h1 align="center"><u>OE REGISTRATION FORM</u></h1>
<form>
<table align="center">
<tr>
<td align="right">Enter Roll no:</td>
<td align="left"><input type="text" name="rollno" pattern="^[0-9]{4}-[0-9]{2}-[0-9]{3}-
[0-9]{3}$"></td>
</tr>
<tr>
<td align="right">Enter Password:</td>
<td align="left"><input type="password" name="password" pattern="^[a-z]{6}$"></td>
</tr>
</table>
<br>
<table align="center" class="oe">
<tr>
<td class="oe">Spatial Information Technology</td>
<td class="oe">Civil</td>
<td class="oe">
<select>
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<tr>
<td class="oe">Transform Techniques</td>
<td class="oe">Maths</td>
<td class="oe">
<select>
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td class="oe">Introduction to Biomedical Electronics</td>
<td class="oe">Electronics</td>
<td class="oe">
<select>
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td class="oe">Signal Engineering</td>
<td class="oe">Electronics</td>
<td class="oe">
<select>
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
<br>
<div align="center"><input type="submit"></div>
</form>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

</body>
</html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

5. Create a registration form to capture email id along with username and password.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<h1 align="center"><u>REGISTRATION FORM</u></h1>
<form>
<table align="center">
<tr>
<td align="right">Enter Email ID:</td>
<td align="left"><input type="email" name="email"></td>
</tr>
<tr>
<td align="right">Enter Username:</td>
<td align="left"><input type="text" name="Username" pattern="^[0-9]{4}-[0-9]{2}-[0-
9]{3}-[0-9]{3}$"></td>
</tr>
<tr>
<td align="right">Enter Password:</td>
<td align="left"><input type="password" name="password" pattern="^[a-z]{6}$"></td>
</tr>
</table>
<br>
<div align="center"><input type="submit"></div>
</form>
</body>
</html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

6. Create a form to capture personal information on one page and educational qualifications on
another page.
Ans:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSPSC Registration form</title>
</head>
<body align="center">
<h2 align="center">TELANGANA STATE PUBLIC SERVICE
COMMISSION<br>HYDERABAD</h2>
<h3>LECTURERS IN GOVERNMENT POLYTECHNICS IN TECHNICAL EDUCATION</h3>
<h3>SERVICE <u>(GENERAL RECRUITMENT) NOTIFICATION NO: 20/2022</u></h3>
<h3><u>BASIC INFORMATION DATA: (CHECKLIST)<br>(To be filled by the
candidate)</u></h3>
<form action="personaldetails.html">
<table align="center">
<tr>
<td align="right">TSPSC ID:</td>
<td align="left"><input type="text" name="tspscid" placeholder="Enter TSPSC ID"
pattern="[A-Z0-9]{10}"></td>
</tr>
<tr>
<td align="right">Ref ID:</td>
<td align="left"><input type="text" name="refid" placeholder="Enter Ref ID" pattern="[0-
9]{10}"></td>
</tr>
<tr>
<td align="right">HALL TICKET NO:</td>
<td align="left"><input type="text" name="htno" placeholder="Enter Hall Ticket no"
pattern="[A-Z0-9]{10}"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="Next"></td>
</tr>
</table>
</form>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

</body>
</html>

personaldetails.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Details</title>
</head>
<body>
<h2 align="center"><u>Personal Details</u></h2>
<form action="qualifications.html">
<table align="center">
<tr>
<td align="right">First Name:</td>
<td align="left"><input type="text" name="fname" placeholder="Enter First Name"
pattern="[A-Za-z]+"></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td align="left"><input type="text" name="lname" placeholder="Enter Last Name"
pattern="[A-Za-z]+"></td>
</tr>
<tr>
<td align="right">Fathers Name:</td>
<td align="left"><input type="text" name="fathername" placeholder="Enter Father Name"
pattern="[A-Za-z]+"></td>
</tr>
<tr>
<td align="right">Gender:</td>
<td align="left">
<input type="radio" checked name="gender" value="Female"> Female
<input type="radio" name="gender" value="Male"> Male
</td>
</tr>
<tr>
<td align="right">Email:</td>
<td align="left"><input type="email" name="email" placeholder="Enter email"></td>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

</tr>
<tr>
<td align="right">Date of Birth:</td>
<td align="left"><input type="date" name="date"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="Next"></td>
</tr>
</table>
</form>
</body>
</html>

qualifications.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Qualification Details</title>
</head>
<body>
<h2 align="center"><u>Qualification Details</u></h2>
<form action="thankyou.html">
<table align="center">
<tr>
<td align="right">BE:</td>
<td align="left"><textarea name="BE" placeholder="Enter your Institution
Name"></textarea></td>
<td align="left"><input type="number" min="0" step="0.01" placeholder="Enter
CGPA:"></td>
</tr>
<tr>
<td align="right">12th Details:</td>
<td align="left"><textarea name="12th" placeholder="Enter your 12th School
Name"></textarea></td>
<td align="left"><input type="number" min="0" step="1" style="width:100px;"
max="1000" placeholder="Enter marks:"></td>
</tr>
<tr>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<td align="right">10th Details:</td>


<td align="left"><textarea name="10th" placeholder="Enter your 10th School
Name"></textarea></td>
<td align="left"><input type="number" min="0" step="0.1" placeholder="Enter
GPA:"></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="checkbox" name="acknowledge"
value="Yes"> I hereby acknowledge the details I filled are true.</td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>

thankyou.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thank You</title>
</head>
<body>
<h1 align="center"><i>Thank You!!</i></h1>
</body>
</html>

Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

EXPERIMENT – 3
Apply CSS to Web Pages

1. What is Box Model?


Ans: The box model is a concept in CSS that defines how the elements on the webpage are rendered in
terms of space and layout. It consists of 4 components:
-> Content
-> Padding
-> Border
-> Margin

2. How are conflicts resolved in CSS?


Ans: CSS conflicts occur when multiple styles are applied to same element. These conflicts are
resolved based on the rule of specificity. It is as follows:
Inline Styles > ID selectors > Class Selectors > Type Selectors (Lowest Specificity)
If there are two rules of same highest specificity, then the one mentioned with the !important attribute
is applied. Else, the one which appears later in stylesheet is applied.

3. What is the default style sheet applied to a page?


Ans: The default style sheet applied to a web page is called the user agent stylesheet. It is provided by
the web browser to ensure basic, consistent appearance across different browsers.

4. Create a registration form with fields such as email id, password, re-type password, gender
(radio), country (list). Apply styles to the form.
Ans:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div><h2>Registration Form</h2></div>
<form>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<table>
<tr>
<td>Enter Email:</td>
<td><input type="email" name="email" placeholder="Enter email:"></td>
</tr>
<tr>
<td>Enter Password:</td>
<td><input type="password" name="pwd" placeholder="Enter Password:"></td>
</tr>
<tr>
<td>Retype Password:</td>
<td><input type="password" name="rpwd" placeholder="Reenter Password:"></td>
</tr>
<tr>
<td>Select Gender:</td>
<td>
<input type="radio" checked name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country">
<option value="India">India</option>
<option value="Nepal">Nepal</option>
<option value="Bhutan">Bhutan</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

./css/styles.css

body{
background-color: rgb(255, 228, 196);
background-color: #f4f4f4;
justify-content: center;
align-items: center;
}
h2{
text-align: center;
font-family: 'Verdana';
font-style: italic;
}
table{
background-color: white;
padding:10px;
margin:2px auto;
border: 1px solid black;
box-shadow: 0px 0px 5px rgba(0,0,0,0.292);
}
td{
padding:4px;
}
input[type="email"],input[type="password"],select {
width: 95%;
padding: 6px;
margin: 4px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
select{
cursor:pointer;
}
input[type="radio"] {
margin-right: 5px;
}
input[type="submit"]{
background-color: #4CAF50;
color:white;
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

border-color: white;
border-radius: 4px;
width: 65px;
height:25px;
cursor: pointer;
}
input[type="submit"]:hover{
background-color:#45a049;
color: white;
border-color: white;
}
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

5. Design a webpage to display your biodata or profile. Apply appropriate styles to the page.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pranav Cholleti</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header>
<h2>Pranav Cholleti</h2>
<nav>
<a href="https://www.linkedin.com/in/pranavcholleti">LinkedIn</a> |
<a href="https://www.github.com/pranav-cholleti">GitHub</a>
</nav>
</header>
<div class="container">
<section>
<h3>Education</h3>
<ul>
<li><strong>Vasavi College of Engineering</strong>, BE in CSE, 2022-2026, CGPA:
<b>9.94</b></li>
<li><strong>Sri Chaitanya Junior Kalasala</strong>, Intermediate in MPC, 2022, 98.7%</li>
<li><strong>Geetha High School</strong>, SSC Board, 2019-2020, GPA: 10.0</li>
</ul>
</section>
<section>
<h3>Projects</h3>
<ul>
<li><strong>Railway Reservation System</strong>: MySQL, Python</li>
<li><strong>Comparative Analysis of Classification Algorithms</strong>: Python, Scikit-
learn, Matplotlib, Jupyter Notebook</li>
<li><strong>Data Structure Visualizer</strong>: Java, Java AWT, Java Swing UI, Java Util
Library</li>
<li><strong>Spending Habit Analyzer</strong>: Python, Google Colab</li>
<li><strong>Quiz Master</strong>: C Language</li>
</ul>
</section>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<section>
<h3>Certifications</h3>
<ul>
<li>Joy Of Computing with Python | NPTEL | Elite+Gold Badge, 93%</li>
<li>Web Application Technologies and Django | Coursera</li>
<li>Problem Solving through Programming in C | NPTEL | Elite+Silver Badge, 84%</li>
<li>Java Foundation Certification, Python Foundation Certification | Infosys SpringBoard</li>
<li>Cisco C++ CPA Certification</li>
</ul>
</section>
<section>
<h3>Achievements</h3>
<ul>
<li>1991 Alumni Award for being the topper in BE-CSE (till 3rd Sem), April 2024</li>
<li>VCE Merit Award for academic excellence in 1st year, January 2024</li>
<li>NPTEL Incentives for being the topper in 2 NPTEL courses, 2022-2023</li>
<li>VCE Alumni Award for being the topper in the even semester, December 2023</li>
</ul>
</section>
</div>
</body>
</html>

./css/styles.css
body{
background-color: rgba(240, 248, 255, 0.976);
}
header{
text-align: center;
font-family:"Verdana";
margin-bottom: 10px;
}
header a{
text-decoration: none;
}
header a:hover{
text-decoration: underline;
}
.container{
padding-top: 4px;
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

padding-left: 10px;
margin: 2px;
background-color: white;
max-width: 95%;
margin: 0 auto;
font-family: Verdana;
font-size: 14px;
}
.container h3{
text-decoration: underline;
}
section ul {
list-style-type: none;
padding: 10px;
}
section ul li {
margin-bottom: 10px;
}
ul li strong {
color: #3d21a1;
}

Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

6. Write CSS code to change the background colour of the page to light green color,
display the list with a circle and apply a margin of 10 on all sides with border on top and
bottom.
Ans:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<h3>List of Courses</h3>
<ul>
<li>Artificial Intelligence</li>
<li>Automata,Language and Computation Theory</li>
<li>Computer Networks</li>
<li>Full Stack Web Development</li>
<li>Economics and Finance for Engineers</li>
</ul>
</body>
</html>

./css/styles.css
body{
background-color:lightgreen;
margin:10px;
}
ul {
list-style-type: circle;
margin: 10px;
padding: 10px;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

Output:

7. Write external CSS code to apply styles to a tab with max-width: 700px.
Ans:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VCE</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<h2>Vasavi College Of Engineering</h2>
<div class="tabcontent">
<p>Vasavi College of Engineering, in its 43 years of existence, is a reputed institution in the State
of Telangana. The college is ACCREDITED BY NAAC WITH 'A++' GRADE. The college in its
pursuit for quality in technical education has earned 3rd ranking in the State and 32nd in the country
(source: Hindustan Times on 24th June 2009).</p>
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

<p>The college offers seven UG (Civil, Mechanical, ECE, CSE, CSE AI & ML, EEE and IT) with
total sanctioned intake of 780 and 5 PG programmes [ME (ES & VLSI); ME (CE & SP); ME (ADM);
ME(PS & PE); and M.Tech (CSE)] with total sanctioned intake of 96].</p>
</div>
</body>
</html>

./css/styles.css
.tabcontent{
max-width: 700px;
}

Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

EXPERIMENT – 4
Validation of Web pages using JavaScript
Prelab Questions:
1. Write JS code to greet the user?
Ans:
var name = prompt("Enter your name:");
alert("Hello, " + name + "!");
2. Write JS code to generate multiplication table.
Ans:
var num = parseInt(prompt("Enter a number:"));
for (var i = 1; i <= 10; i++){ console.log(num + " x " + i + " = " + (num * i)); }
3. Write JS code to detect the user browser.
Ans:
var browser = navigator.userAgent;
console.log("You are using: " + browser);
4. Write JavaScript code to validate a username that starts with a digit, end with an alphabet
and has a size of 10.
Ans:
var username = prompt("Enter a username:");
var regex = /^[0-9].*[a-zA-Z]$/;
if (username.length === 10 && regex.test(username)){console.log("Valid username!");
} else { console.log("Invalid username!"); }
5. Write JS code to move an image in direction as specified by the user by clicking the button
like left, right, top & bottom.
Ans:
var left = 0; var top = 0; var direction = prompt("Enter direction (left, right, up, down):");
switch(direction){
case 'left': left -= 20; break;
case 'right': left += 20; break;
case 'up': top -= 20; break;
case 'down': top += 20; break;
default: console.log("Invalid direction"); return;
}
console.log("Image position: Left = " + left + "px, Top = " + top + "px");
6. What is meant by validation?
Ans: Validation means the process of checking whether the given input is in correct format or pattern
required. It ensures the accuracy and consistency of data and ensures data is valid. There are 2 types of
validation: Client-Side Validation and Server-Side Validation.
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

Programs
1. Write a JS program to generate prime numbers in a given range by accepting numbers from
text boxes and print them in the same page.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Nos</title>
<style>
input[type="text"]{
width:150px;
padding: 4px;
margin: 5px;
border:1px solid black;
border-radius: 3px;
}
</style>
</head>
<script>
function isPrime(a){
if (a <= 1) return false;
for(i=2;i<= a/2;i++){
if(a%i===0){ return false; }
}
return true;
}
function printprime(){
var l= parseInt(document.getElementById("from").value);
var h= parseInt(document.getElementById("to").value);
if(l>h){
document.getElementById("resp").innerHTML = "Invalid Range!";
return;
}
res="";
for(i=l;i<=h;i++){
; if(isPrime(i)){ res=res+i+" "; }
}
document.getElementById("resp").innerHTML=res;
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

return;
}
</script>
<body align="center">
<form align="center">
<div>
<input type="text" placeholder="From" id="from" pattern="^[0-9]+$">
<input type="text" placeholder="To" id="to" pattern="^[0-9]+$">
</div>
<input type="button" value="Submit" id="Submit" onclick="printprime()"/>
</form>
<p style="font-size: medium;width:80%;" id="resp"> </p>
</body>
</html>

Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

2. Write JS function to validate hallticket number accepted using textbox. The format of the
hallticket must be of the form 1602-22-733-YYY and 1602-22-748-YYY.
Ans:
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HallTicket Validator</title>
<script> function htvalidate(){
ht=document.getElementById("htno").value;
a=document.getElementById("resp")
a.style="font-size:medium;padding:10px; width=50px;"
if(ht.match("^1602-22-733-[0-9]{3}$") || ht.match("^1602-22-748-[0-9]{3}$")){
a.innerHTML=ht+" is VALID HT no.";
}else{ a.innerHTML=ht+" is INVALID HT no."; } return;
} </script>
</head>
<body align="center">
<h2>HallTicket Validator</h2>
<input type="text" id="htno" placeholder="Enter Hall Ticket Number:"/>
<input type="button" value="Validate" onclick="htvalidate()"/> <div id="resp"></div>
</body> </html>
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

3. Write external JS program to select atleast two car models from the 5 options available. All
the options are to be represented using checkboxes.
Ans:
index.html
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cars</title> </head>
<body align="center">
<script src="./js/script.js"></script>
<input type="checkbox" name="cars" value="Hyundai"> Hyundai </input>
<input type="checkbox" name="cars" value="Kia"> Kia </input>
<input type="checkbox" name="cars" value="Tata"> Tata </input>
<input type="checkbox" name="cars" value="Mahindra"> Mahindra </input>
<input type="checkbox" name="cars" value="Suzuki"> Suzuki </input><br />
<input type="button" value="Submit" onclick="verify()"/> <div id="resp"> </div>
</body> </html>
./js/script.js
function verify(){
resp=document.getElementById("resp");
resp.style="font-size:large;font-family:Verdana"
a=document.querySelectorAll("input[type='checkbox']:checked");
if(a.length <2){ resp.innerHTML="<b>2 or more cars must be selected !!</b>"
}else{ resp.innerHTML="<b>Thank you for selecting !!</b>" } return;
}
Output:
VASAVI COLLEGE OF ENGINEERING
(AUTONOMOUS)
(Affiliated
to Osmania University)
Ibrahimbagh, Hyderabad – 500 031.
DEPARTMENT OF : COMPUTER SCIENCE AND ENGINEERING
NAME OF THE LABORATORY : FSWD LAB
Name: C. Pranav Roll No: 1602-22-733-031 Page No :

4. Write a JS program to move an image to 100px right when a button is clicked.


Ans:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<script>
function mvright(){
ele=document.getElementById("logo");
curr=parseInt(ele.style.left) || 0;
ele.style.left=curr+100+"px";
return;
}
</script>
<img src="./img/logo.png" id="logo" style="position:relative;left:0px;"/><br>
<input type="button" value="Move Right" onclick="mvright()"/>
</body>
</html>
Output:

You might also like