You are on page 1of 27

[Approved by AICTE, Govt. of India & Affiliated to Dr.

APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

Lab File

Web Designing Workshop


(BCS-353)

Submitted By:
Student Name: Aryan Shukla
University Roll No.: 2201921530046
Branch: CSAIML
Section: CSAIML-1
Group: 2

Submitted To:
Mr. Rakesh Kumar

GL BAJAJ Institute of Technologies & Management


Greater Noida

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

Index
S.No Name of experiment Date of Date of Signatur
. Experimen Submissio e
t n
1 Design the following static web pages
required for an online book store website.
HOMEPAGE:
The static home page must contain three
frames.
Top frame: Logo and the college name and
links to Homepage, Login page,
Registration page, Catalogue page and
Cart page (the description of these pages
will be given below).
For example: When you click the link “CSE”
the catalogue for CSE Books should be
displayed in the Right frame. Right frame:
The pages to the links in the left frame must be
loaded here. Initially this page contains
description of the website.

2 LOGINPAGE:
This page looks like below:

3 CATOLOGUE PAGE: The catalogue page should


contain the details of all the books available
in the website in a
table. The details should contain the
following:
1. Snap shot of Cover Page.

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

4 CARTPAGE: The cart page contains the details


about the books which are added to the cart.
The cart page should
look like this:

5 REGISTRATION PAGE : Create a“ registration


form“ with the following fields
1)Name (Text field)
2)Password (password field)
3) E-mailid(text field)
4) Phone Number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (checkboxes–English,
Telugu, Hindi, Tamil)
8) Address (text area)
6 Js VALIDATION: Write JavaScript to validate the
following fields of the above registration
page.
1. Name (Name should contains alphabets
and the length should not be less than 6
characters).
2. Password (Password should not be less than
6 characters length).

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

7 Js VALIDATION:
3. E-mailid (should not contain any invalid and
must follow the standard
pattern(name@domain.com)
4. Phone Number(Phone number should
contain 10 digits only).
8 CSS: Design a web page using CSS(Cascading
Style Sheets) which includes the following:
1) Use different font, styles:
In the style definition you define how each
selector should work (font, color etc.). Then, in
the body of your pages, you refer to these
selectors to activate the styles.
2) Set a background image for both the page
and single elements on the page.
9 CSS:
1) Control the repetition of the image with the
background-repeat property.
2) Define styles for links as
A:link
A:visited
A:active
A:hover
10 Consider a small topic of your choice on
which you can develop static Webpages
and try to implement
all topics of html, CSS and Js within the
topic.
Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL-1
AIM: Design the following static webpages required for an online book store website.

HOMEPAGE:
• The static home page must contain three frames.
• Top frame: Logo and the college name and links to Homepage, Login page,
Registration page, Catalogue page and Cart page (the description of these
pages will be given below).
For example: When you click the link “CSE” the catalogue for CSE Books
should be displayed in the Right frame. Right frame: The pages to the links in
the left frame must be loaded here. Initially this page contains description of the
web site.

SOFTWARE REQUIRED: Notepad, SDK


DESCRIPTION: In this program the entire web paged are created by
using basic HTML tags. Home page is made using using GRID
Container Definition:
Use display: grid; on the container to establish a grid context.
Grid Columns and Rows:
Define the grid structure using properties like grid-template-columns and grid-template-
rows.
Column and Row Sizing:
Specify the size of columns and rows using units like pixels, percentages, or the fr unit for
fractions.
Grid Gaps:
Set the gap between columns and rows using grid-column-gap and grid-row-gap, or use grid-
gap for both.
Item Placement:
Position grid items using properties like grid-column and grid-row or shorthand grid-area.
Alignment:
Align and justify items within the grid using properties like justify-items, align-items,
justify-content, and align-content.
Auto Placement:
Let the grid automatically place items with grid-auto-flow and control the direction with
grid-auto-columns and grid-auto-rows.

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Web page</title>

</head>

<style>

table { border-collapse: collapse;}

td ,th { min-width: 100px; border: 4px solid rgb(231, 66, 16); }

.myimage{

text-align: center;

</style>

<table border="1" width="600" cellpadding="20" >

<tr style="background-color: rgb(163, 222, 135);" >

<th> <img src="https://www.glbitm.org/Uploads/image/846imguf_LogoGLBajaj.jpg" alt="logo"


width="80" height="50">

</th>

<th colspan="4" style="font-size:20px; ">G.L Bajaj Institue of Technology and Management</th>

</tr>

<tr style="background-color:cornsilk; ">

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<th>Home</th>

<th colspan="1">Login</th>

<th>Registration</th>

<th>catalogue</th>

<th>cart</th>

</tr>

<tr >

<td>CSE</td>

<td rowspan="4" colspan="4" cellspaddding="20">

GL Bajaj Institue of Technology and Management

is the best private college affliated with aktu.

<br>This is the home page of GL Bajaj istitute of Thechnology.

<br>For any query you can search on the searchbar. </td>

</tr>

<tr style="background-color: rgb(228, 228, 227);" >

<td>ECE</td>

</tr>

<tr style="background-color: rgb(237, 231, 241);">

<td>Civil</td>

</tr>

<tr style="background-color: rgb(203, 219, 174);">

<td>Electrical</td>

</tr>

</table>

</body>

</html>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL-2

AIM: Design the following static webpages required for an online book store website.

LOGIN PAGE: In computer security, logging in is the process by which an individual gains
access to a computer system by identifying and authenticating themselves. The user
credentials are typically some form of username and a matching password, and these
credentials themselves are sometimes referred to as a login.

SOFTWARE REQUIRED: Notepad, SDK THEORY

Theory:
Basic Text Input:
<input type="text"> creates a simple single-line text input.
Placeholder Text:
Use the placeholder attribute to provide a hint or example text inside the input.
Submit Input:
The <input type="submit"> element is used to create a button that, when clicked, submits the
form data to the server for processing.
Reset Input:
The <input type="reset"> element is used to create a button that, when clicked, resets all the
form fields back to their default values.

Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>

<style>
table { border-collapse: collapse;}

td ,th { min-width: 100px; border: 4px solid rgb(231, 66, 16); }

.myimage{
text-align: center;

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

}
input[type="submit"] {
background-color: #07600a;
border: 6;
color: white;
padding: 10px 20px;
text-align: center;

font-size: 16px;
}
input[type="reset"] {
background-color: #4ca5af;
border: 4;
color: rgb(18, 25, 13);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;

cursor: pointer;
}
input[type="text"], input[type="password"] {
background-color: #f1f2ef;
border: 1px solid #bebbbb;
padding: 10px 10px;
font-size: 15px;
margin: 4px 2px;
}
</style>
<table border="1" width="600" cellpadding="20" >

<tr style="background-color: rgb(163, 222, 135);" >

<th> <img src="https://www.glbitm.org/Uploads/image/846imguf_LogoGLBajaj.jpg" alt="logo"


width="80" height="50">
</th>

<th colspan="4" style="font-size:20px; ">G.L Bajaj Institue of Technology and Management</th>

</tr>
<tr style="background-color:cornsilk; ">
<th>Home</th>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>

<tr >
<td>CSE</td>
<td rowspan="4" colspan="4" style="text-align: center; margin-inline: 100px;">
<form action="Login page">
<h2>Login page</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</td>
</tr>

<tr style="background-color: rgb(228, 228, 227);" >

<td>ECE</td>

</tr>

<tr style="background-color: rgb(237, 231, 241);">

<td>Civil</td>
</tr>

<tr style="background-color: rgb(203, 219, 174);">


<td>Electrical</td>

</tr>

</table>

</body>
</html>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL-3
AIM: Design the following static webpages required for an online book store website.

Catalogue Page: A catalog page is a web page or document that presents a curated collection
of products or services, providing users with organized information, visuals, and navigation
options to facilitate browsing and decision-making.

SOFTWARE REQUIRED: Notepad, SDK THEORY:

Theory:
In CSS, the term "image tag" is not used directly. Instead, CSS is mainly responsible for
styling and positioning elements on a web page, including images. However, I believe you
might be referring to the <img> tag in HTML, which is used to embed images in a webpage.
In that case, here's a brief overview without specific code:
Source (src):
The src attribute in the <img> tag specifies the URL or file path of the image.
Alternate Text (alt):
The alt attribute provides alternative text for the image, which is displayed if the image
cannot be loaded. It is also used for accessibility.

Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>

<style>
table { border-collapse: collapse;}

td ,th { min-width: 100px; border: 4px solid rgb(231, 66, 16); }

.myimage{
text-align: center;

</style>
<table border="1" width="100" cellpadding="20" >

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<tr style="background-color: rgb(163, 222, 135);" >

<th> <img src="https://www.glbitm.org/Uploads/image/846imguf_LogoGLBajaj.jpg"


alt="logo" width="80" height="50">
</th>

<th colspan="4" style="font-size:20px; ">G.L Bajaj Institue of Technology and


Management</th>

</tr>

<tr style="background-color:cornsilk; ">


<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>Catalogue</th>
<th>Cart</th>
</tr>
<tr >

<td>CSE</td>

<td rowspan="4" colspan="1" style="text-align: left; margin-inline: 100px;">


<img src="https://m.media-amazon.com/images/W/MEDIAX_792452-
T2/images/I/412XZChAq5L._SY445_SX342_.jpg" width="100" height="100" >

<br> <br>
<img src="https://m.media-amazon.com/images/W/MEDIAX_792452-T2/images/I/41t-
pVrGX8L._SY445_SX342_.jpg" alt="" width="100" height="100">
<br> <br>

<img src="https://m.media-amazon.com/images/W/MEDIAX_792452-
T2/images/I/61M74Vmgg+L._SY466_.jpg" alt="" width="100" height="100">

</td>
<td rowspan="4" colspan="4" style="text-align: left; margin-inline: 100px;">

<pre>

Book name: Python $40


Author: K.Sharma <img src="https://freepngimg.com/save/25486-
add-to-cart-button/763x220" alt="" width="50" height="30"">
Publication: S.Chand

</pre>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<pre>
Book name:Javascript $30
Author: Sunil Kumar
Publication: Oxford <img src="https://freepngimg.com/save/25486-
add-to-cart-button/763x220" alt="" width="50" height="30"> <br>

</pre>

<pre>

Book name: Handbook $15


Author: R.D Verma
Publication: Arihant <img src="https://freepngimg.com/save/25486-
add-to-cart-button/763x220" alt="" width="50" height="30"> <br>

</pre>

</td>

</tr>

<tr style="background-color: rgb(228, 228, 227);" >

<td>ECE</td>
</tr>

<tr style="background-color: rgb(237, 231, 241);">


<td>Civil</td>
</tr>

<tr style="background-color: rgb(203, 219, 174);">


<td>Electrical</td>
</tr>

</table>

</body>

</html>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL-4
AIM: Design the following static webpages required for an online book store website.

Cart Page:A cart page is a section of an online shopping website where users can view and
manage the items they have selected for purchase before proceeding to checkout.

SOFTWARE REQUIRED: Notepad, SDK THEORY:

Theory:
CSS is primarily responsible for styling and layout, and it works in conjunction with HTML,
which defines the structure of a webpage. Tables in HTML are created using the <table>,
<tr> (table row), <th> (table header), and <td> (table data) tags. While CSS doesn't directly
create tables, it can be used to style and enhance them. Here's a short overview:
Styling Table Elements:
CSS is used to style the appearance of <table>, <tr>, <th>, and <td> elements, controlling
aspects like font, color, borders, and spacing.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>

<style>
table { border-collapse: collapse; }

td ,th { min-width: 100px; border: 4px solid rgb(231, 66, 16); }

.myimage{
text-align: center;

</style>
<table border="1" cellpadding="20" >

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<tr style="background-color: rgb(163, 222, 135);" >

<th> <img src="https://www.glbitm.org/Uploads/image/846imguf_LogoGLBajaj.jpg"


alt="logo" width="80" height="50">
</th>

<th colspan="4" style="font-size:20px; ">G.L Bajaj Institue of Technology and


Management</th>

</tr>
<tr style="background-color:cornsilk; ">
<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>
<tr >
<td>CSE</td>
<td rowspan="4" colspan="4" >
<pre><b> Book name Price Quantity Amount </b>

Python $40 2 $80


Javascript $30 1 $60
Science $15 0 $15

<b>Total amount: $155</b>


</pre>
</td>
</tr>
<tr style="background-color: rgb(228, 228, 227);" >
<td>ECE</td>
</tr>
<tr style="background-color: rgb(237, 231, 241);">
<td>Civil</td>
</tr>
<tr style="background-color: rgb(203, 219, 174);">
<td>Electrical</td>
</tr>
</table>
<body >
</body>
<html>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL-5
AIM: Design the following static webpages required for an online book store website.

Cart Page:A cart page is a section of an online shopping website where users can view and
manage the items they have selected for purchase before proceeding to checkout.

SOFTWARE REQUIRED: Notepad, SDK THEORY:

Theory:
Text input: Allows users to enter a single line of text.
Password input: Similar to text input but hides the entered characters for password entry.
Textarea: Allows users to input multiple lines of text, suitable for longer responses.
Checkbox: Presents a binary choice, where users can either check or uncheck a box.
Radio button: Allows users to select one option from a group of options.
Dropdown menu (select): Provides a list of options, and users can select one from the
list.
File input: Enables users to upload files from their local device.
Submit button: Submits a form to the server for processing.
Reset button: Resets the form to its default state.
Number input: Allows users to enter a numeric value, with optional restrictions.
Date input: Allows users to pick a date from a date picker.
Email input: Specifically designed for entering email addresses.
URL input: Intended for entering website URLs.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>

<style>
table { border-collapse: collapse;}

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

td ,th { min-width: 100px; border: 4px solid rgb(231, 66, 16); }

.myimage{
text-align: center;
}
input[type="submit"] {
background-color: #07600a;
border: 6;
color: white;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
input[type="reset"] {
background-color: #4ca5af;
border: 4;
color: rgb(18, 25, 13);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
input[type="text"], input[type="password"] {
background-color: #f1f2ef;
border: 1px solid #bebbbb;
padding: 10px 10px;
font-size: 15px;
margin: 4px 2px;
}

/* input[type=submit] {
background-color: #4CAF50;
color: white;
}

input[type=submit]:hover {
background-color: #45a049;
}

label {
display: block;

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

margin-top: 10px;
} */
</style>
</style>
<table border="1" width="600" cellpadding="20" >

<tr style="background-color: rgb(163, 222, 135);" >

<th> <img src="https://www.glbitm.org/Uploads/image/846imguf_LogoGLBajaj.jpg"


alt="logo" width="80" height="50">
</th>

<th colspan="4" style="font-size:20px; ">G.L Bajaj Institue of Technology and


Management</th>

</tr>
<tr style="background-color:cornsilk; ">
<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>
<tr >
<td>CSE</td>
<td rowspan="4" colspan="4" style="text-align: center; margin-inline: 1000px;" >
<header ><b> REGISTRATION PAGE</b></header>
<br>

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


<input type="text" id="email" name="Email id:" required>
<br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<br> <br>
<label for="sex">Sex:</label>
<input type="radio" id="male" name="sex" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female" required>
<label for="female">Female</label>
<br> <br>
<label for="dob">Date of birth :</label>
<input type="date">

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

</select>
<br> <br>
<label for="languages">Languages Known:</label>
<input type="checkbox" id="english" name="languages[]" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="languages[]" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="languages[]" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="languages[]" value="Tamil">
<label for="tamil">Tamil</label>
<br> <br>

<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<br> <br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</td>
</tr>
<tr style="background-color: rgb(228, 228, 227);" >
<td>ECE</td>
</tr>
<tr style="background-color: rgb(237, 231, 241);">
<td>Civil</td>
</tr>
<tr style="background-color: rgb(203, 219, 174);">
<td>Electrical</td>
</tr>
</table>

</body>
</html>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL 6

AIM: Write JavaScript to validate the following fields of the above registration page.
JAVASCRIPT:
JavaScript is a programming language commonly used in web design to add interactivity and
dynamic functionality to websites. It allows developers to manipulate and control various
elements on a webpage, respond to user actions, and modify content in real time, enhancing
the overall user experience.
SOFTWARE REQUIRED: Notepad, SDK
DESCRIPTION:
Validation is the process of ensuring that user-submitted data in a form meets specific
criteria or constraints. In the case of the given credentials, the validation requirements are as
follows:
1) Name: The name should only contain alphabetic characters, and its length should be at
least 6 characters. JavaScript can be used to attach an event listener to the Name input field
that listens for user input or form submission. Upon user input or form submission, the
JavaScript code can retrieve the entered name value, check if it consists of only alphabetic
characters using regular expressions, and verify if its length meets the minimum requirement
of 6 characters. If the validation fails, an error message can be displayed to prompt the user
to correct the input.
2) Password: The password should have a minimum length of 6 characters. JavaScript can be
used to validate the password field. An event listener can be attached to the Password input
field, which triggers the validation process when the user enters data or submits the form.
The JavaScript code would then check if the password length is at least 6 characters. If the
validation fails, an error message can be displayed to guide the user to choose a password
that meets the length requirement.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
<style>
html {

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

font-family: 'Times New Roman', Times, serif;


font-size: 20px;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
.header {
height: 10vh;
margin: 10px 0 50px;
display: flex;
text-align: center;
padding-bottom: 10px;
border-bottom: solid 2px black;
}
h1 {
width: 100%;
}
.container {
margin: auto;
max-width: 600px;
border: solid 2px black;
}
.container .head {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 50px;
& h3 {
margin: 0;
height: 100%;
width: 100%;
display: grid;
place-items: center;
border-bottom: solid 3px black;
}
& h3:nth-of-type(1) {
border-right: solid 3px black;
background-color: rgb(240, 212, 177);
}
}
form {
padding: 30px 0;

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 40px;
}
form label,span {
justify-self: right;
white-space: nowrap;
}
form input,form textarea{
padding: 5px 10px;
border-radius: 5px;
border: solid 1px black;
outline: none;
font-size: 15px;
}
button{
grid-column-start: 1;
grid-column-end: 3;
margin-top: 20px;
padding: 10px 20px;
justify-self: center;
font-weight: bold;
}
.modal::backdrop{
backdrop-filter: blur(5px);
}
.modal{
padding: 1em 2em;
background-color: rgb(240, 212, 177);
border: solid 2px black;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
.modal div{
display: flex;
justify-content: center;
}
#close{
padding: 1em 2em;
font-weight: bold;
}
</style>
</head>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<body>
<div class="header">
<img src="logo.png" alt="Logo">
<h1>BOOKSTORE</h1>
</div>
<div class="container">
<div class="head">
<h3 class="right">Register</h3>
<h3 class="left">Login</h3>
</div>
<form action="#" id="form">
<label for="name">Name :</label>
<input type="text" id="name" name="name[]" placeholder="Name"
autocomplete="name">
<label for="password">Password :</label>
<input type="password" name="password[]" id="password" placeholder="Password"
autocomplete="pas">
<label for="email">E-mail :</label>
<input type="email" id="email" name="email[]" placeholder="email"
autocomplete="email">
<label for="phone">Phone Number :</label>
<input type="text" id="phone" name="phone[]" placeholder="Phone Number"
autocomplete="phone">
<span>Sex :</span>
<div>
<input type="radio" id="male" name="sex">
<label for="male">Male &nbsp&nbsp</label>
<input type="radio" id="female" name="sex">
<label for="female">Female </label>
</div>
<label for="dob">Date of birth :</label>
<input type="date" id="dob">
<span>Languages :</span>
<div>
<input type="checkbox" id="Hindi" name="Language">
<label for="Hindi">Hindi &nbsp&nbsp</label>
<input type="checkbox" id="English" name="Language">
<label for="English">English </label><br>
<input type="checkbox" id="Tamil" name="Language">
<label for="Tamil">Tamil &nbsp&nbsp</label>
<input type="checkbox" id="Telugu" name="Language">
<label for="Telugu">Telugu </label>
</div>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

<label for="address">Address :</label>


<textarea id="address" autocomplete="address">Adress
</textarea>
<button type="submit">REGISTER</button>
</form>
</div>
<dialog class="modal">
<p id="para">Registered Successfully</p>
<div>
<button id="close">OK</button>
</div>
</dialog>
<script>
const modal = document.querySelector(".modal");
const para = document.getElementById("para");
const close = document.getElementById("close");
form.onsubmit = function (e) {
let name = document.getElementById("name").value;
// console.log(name);
let password = document.getElementById("password").value;
e.preventDefault();
modal.showModal();
namevalidation(name,password);
}
function namevalidation(name,password) {
if ((name.length >= 6) && /\d/.test(name) == false) {
passwordvalidation(password);
}
else{
para.textContent = "Name should not contain numbers and should be atleast 6
characters long";
}
}
function passwordvalidation(password) {
if (password.length >= 6) {
succesful()
}
else{
para.textContent = "Password should be atleast 6 characters long";
}
}
function succesful() {
para.textContent = "Registered Successfully";

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

}
close.onclick = function () {
modal.close();
}
</script>
</body>
</html>

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

PRACTICAL 7

AIM: Write JavaScript to validate the following fields of the above registration page.
JAVASCRIPT:
JavaScript is a programming language commonly used in web design to add interactivity and
dynamic functionality to websites. It allows developers to manipulate and control various
elements on a webpage, respond to user actions, and modify content in real time, enhancing
the overall user experience.
SOFTWARE REQUIRED: Notepad, SDK
DESCRIPTION:
Validation is crucial for ensuring that user-submitted data in a form adheres to specific
criteria. In the given credentials, the form validation requirements for the remaining fields
are as follows:
1) E-mail ID: The e-mail ID should not contain any invalid characters and must follow the
standard pattern of "name@domain.com". To implement this validation, JavaScript can be
used to attach an event listener to the E-mail ID input field. Upon user input or form
submission, the JavaScript code can retrieve the entered e-mail ID value and verify if it
matches the standard pattern using regular expressions.
2) Phone Number: The phone number should contain exactly 10 digits. JavaScript can be
utilized to validate the phone number field. An event listener can be attached to the Phone
Number input field, triggering the validation process with user input or form submission.
PROGRAM:

Department of Applied Computational Science & Engineering


[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering

Department of Applied Computational Science & Engineering

You might also like