Scribd
Upload
8 views

frontend file

This document contains a practical file for a B.Tech. student focusing on frontend development, detailing various HTML programs including creating lists, tables, a home page with links, a login form, registration form, frameset, image maps, and a text analyzer. Each section includes sample HTML code for the respective tasks, demonstrating the student's understanding of web development concepts. Additionally, it covers styling with CSS and client-side validation scripts for forms.

Uploaded by

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

frontend file

This document contains a practical file for a B.Tech. student focusing on frontend development, detailing various HTML programs including creating lists, tables, a home page with links, a login form, registration form, frameset, image maps, and a text analyzer. Each section includes sample HTML code for the respective tasks, demonstrating the student's understanding of web development concepts. Additionally, it covers styling with CSS and client-side validation scripts for forms.

Uploaded by

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

Plot No.2, Sector 17-A, Yamuna Expressway, Greater Noida, Gautam Buddh Nagar, U.P.

, India

Frontend Development
R1UC508C
B.Tech. ( semester - 5)

Practical File

Submitted by: Submitted to:


Name:Ashutosh Bhatt Mr. Gaurav Kumar

Adm No:22scse1011712
Q1 Write a HTML program:
(a)
i. to create lists.
ii. to create Tables.
iii. to display your education details in a tabular format.
(b) Write an HTML code to create a Home page having three links: About Us, Our
Services and Contact Us. Create separate web pages for the three links.

Code:

(a) i. to create lists:

<!DOCTYPE html>
<html>
<head> <title>HTML Lists</title> </head>
<body>
<h2>Ordered List</h2>
<ol> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ol>

<h2>Unordered List</h2>
<ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul>

<h2>Nested List</h2>
<ul>
<li>Fruits
<ul> <li>Apple</li> <li>Orange</li> </ul>
</li>
<li>Vegetables
<ul> <li>Carrot</li> <li>Broccoli</li> </ul>
</li>
</ul>
</body>
</html>

ii. to create tables:

<!DOCTYPE html>
<html>
<head> <title>HTML Table</title> </head>
<body>

<table border="1">
<caption>Student Data</caption>
<tr> <th>Name</th> <th>Roll No</th> <th>Marks</th> </tr>
<tr> <td>Rohan</td> <td>12</td> <td>79</td> </tr>
<tr> <td>Sumit</td> <td>23</td> <td>91</td> </tr>
<tr> <td>Vikas</td> <td>9</td> <td>85</td> </tr>
</table>
</body>
</html>

iii. to display your education details in a tabular format


<!DOCTYPE html>
<html>
<head>
<title>Education Details</title>
</head>
<body>
<h1>Educational Details</h1>
<table border="1">
<tr>
<th>Class</th>
<th>Institution</th>
<th>Year of Passing</th>
<th>Percentage</th>
</tr>
<tr>
<td>12th</td>
<td>Apex School</td>
<td>2022</td>
<td>86%</td>
</tr>
<tr>
<td>10th</td>
<td>Apex School</td>
<td>2020</td>
<td>81%</td>
</tr>
</table>
</body>
</html>

(b)
Home page:

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="about-us.html">About Us</a></li>
<li><a href="our-services.html">Our Services</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</nav>
</body>
</html>

About us page:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>This is the About Us page of the website. Here, you can add
details about the organization or yourself.</p>
</body>
</html>

Our Services page:

<!DOCTYPE html>
<html>
<head>
<title>Our Services</title>
</head>
<body>
<h1>Our Services</h1>
<p>We provide a variety of services including:</p>
<ul>
<li>Web Development</li>
<li>Mobile App Development</li>
<li>Digital Marketing</li>
</ul>
</body>
</html>

Contact Us page:

<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<p>Feel free to reach out through the following:</p>
<ul>
<li>Email: [email protected]</li>
<li>Phone: +91 9834981347</li>
<li>Address: 123 Main Market, Delhi</li>
</ul>
</body>
</html>

Q2 Write an HTML code to create a login form. On submitting the form, the user should
get navigated to a profile page.
Code:
Login Form page:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Form</h1>

<form action="profile.html">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"
required><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"
required><br><br>

<button type="submit">Login</button>

</form>
</body>
</html>

Profile page:

<!DOCTYPE html>
<html>
<head>
<title>Profile Page</title>
</head>
<body>
<h1>Welcome to Your Profile</h1>
<p>Thank you for logging in. Here is your profile information.</p>
</body>
</html>

Q3 a. Write an HTML code to create a Registration Form. On submitting the form, the
user should be asked to login with this new credential.
b. Write an HTML code to create a frameset having header, navigation and content
sections

Code:
(a)
Registration page:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="login.html">
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname"
required><br><br>

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

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"
required><br><br>

<button type="submit">Register</button>
</form>
</body>
</html>

Login page:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Form</h1>
<p>Your registration was successful. Please log in with your new
credentials:</p>
<form action="welcome.html" method="GET">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"
required><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"
required><br><br>

<button type="submit">Login</button>
</form>
</body>
</html>
Welcome page:
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>You have successfully logged in. Enjoy exploring your
profile
and our services.</p>
</body>
</html>

(b)
Frameset page:
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="20%,*">
<frame src="header.html" name="headerFrame" scrolling="no">
<frameset cols="25%,*">
<frame src="navigation.html" name="navFrame">
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>
</html>

Header page:
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
</head>
<body>
<h1 style="text-align: center;">My Website Header</h1>
</body>
</html>
Navigation page:
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
</head>
<body>
<ul>
<li><a href="home.html" target="contentFrame">Home</a></li>
<li><a href="about.html" target="contentFrame">About Us</a></li>
<li><a href="services.html"
target="contentFrame">Services</a></li>
<li><a href="contact.html" target="contentFrame">Contact</a></li>
</ul>
</body>
</html>

Content page:
<!DOCTYPE html>
<html>
<head>
<title>Content</title>
</head>
<body>
<h1>Welcome to the Content Section</h1>
<p>Select a link from the navigation menu to view more details.</p>
</body>
</html>
Q4 Create a HTML page:
a. To embed an image map in a web page.
b. To fix the hot spots.
c. Show all the related information when the hot spots are clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Interactive Image Map</h1>
<p>Click on the hot spots in the image to see related
information.</p>
<img src="world-map.jpg" alt="World Map" usemap="#worldmap"
width="800"
height="400">

<map name="worldmap">
<area shape="rect" coords="50,50,200,150" href="north-
america.html"
alt="North America" title="North America">
<area shape="poly" coords="600,50,700,50,700,150,600,150"
href="asia.html" alt="Asia" title="Asia">
</map>

</body>
</html>

North America page


<!DOCTYPE html>
<html>
<head>
<title>North America</title>
</head>
<body>
<h1>Welcome to North America</h1>
<p>North America is a continent in the Northern Hemisphere and almost
entirely within the Western Hemisphere.</p>
</body>
</html>

Asia page
<!DOCTYPE html>
<html>
<head>
<title>Asia</title>
</head>
<body>
<h1>Welcome to Asia</h1>
<p>Asia is the largest continent primarily located in the Northern
Hemisphere and extends into the Eastern Hemisphere.</p>
</body>
</html>

Q5 Write an HTML page that has one input, which can take multi-line text and a submit
button. Once the user clicks the submit button, it should show number of characters,
lines and words in the text entered using an alert message. Words are separated with
white space and lines are separated with new line character.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Text Analyzer</title>
</head>
<body>
<h1>Text Analyzer</h1>
<form id="textForm">
<label for="textInput">Enter your text below:</label><br>
<textarea id="textInput" rows="10" cols="50" placeholder="Type or
paste your text here..." required></textarea><br><br>
<button type="button" onclick="analyzeText()">Submit</button>
</form>

<script>
function analyzeText() {
const text = document.getElementById("textInput").value;
const charCount = text.length;
const lineCount = text.split(/\n/).filter(line=>line.trim()!
=="")
.length;
const wordCount=text.trim().split(/\s+/).filter(word=>word!
=="")
.length;
alert(`Characters: ${charCount}\nWords: ${wordCount}\nLines:
${lineCount}`);
}
</script>
</body>
</html>
Q6 (a) Create a web-page and perform styling with inline, internal, and external style-
sheets.
(b) Write client side scripts for validating web page using DHTML controls.

Code:
(a)
<!DOCTYPE html>
<html>
<head>
<title>Styling Example</title>

<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
}
.header {
text-align: center;
color: #4CAF50;
}
.content {
margin: 20px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
</style>

<link rel="stylesheet" href="styles.css">


</head>
<body>
<h1 class="header">Styling with Inline, Internal, and External
CSS</h1>

<div class="content">
<p style="color: blue;">This is a paragraph with <strong>inline
styling</strong> (blue text).</p>
<p>This paragraph is styled using internal CSS (background and
border).</p>
<p class="external">This paragraph is styled using an external
stylesheet.</p>
</div>
</body>
</html>

External css file:


.external {
color: red;
font-size: 18px;
font-weight: bold;
}

(b)
<!DOCTYPE html>
<html>
<head>
<title>Web Page Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input {
margin-bottom: 10px;
padding: 8px;
width: 300px;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Form Validation Example</h1>
<form id="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<span id="nameError" class="error"></span><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<span id="emailError" class="error"></span><br>

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

<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let isValid = true;
document.getElementById("nameError").textContent = "";
document.getElementById("emailError").textContent = "";
document.getElementById("ageError").textContent = "";
const name = document.getElementById("name").value.trim();
if (name === "") {
document.getElementById("nameError").textContent = "Name
is
required.";
isValid = false;
}

const email = document.getElementById("email").value.trim();


const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]
{2,6}$/;
if (email === "") {
document.getElementById("emailError").textContent =
"Email is
required.";
isValid = false;
} else if (!emailPattern.test(email)) {
document.getElementById("emailError").textContent =
"Enter a
valid email.";
isValid = false;
}

const age = document.getElementById("age").value.trim();


if (age === "") {
document.getElementById("ageError").textContent = "Age is
required.";
isValid = false;
} else if (isNaN(age) || age <= 0) {
document.getElementById("ageError").textContent = "Enter
a
valid age.";
isValid = false;
}

return isValid;
}
</script>
</body>
</html>
Q7 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.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Styling Example</title>
<style>
/* General Page Styling */
body {
font-family: "Arial", sans-serif;
background-image: url('background-page.jpg');
background-size: cover;
background-attachment: fixed;
margin: 0;
padding: 0;
color: #333;
}

/* Header Styling */
.header {
font-family: "Georgia", serif;
text-align: center;
padding: 20px;
background-image: url('header-bg.jpg');
background-size: cover;
background-position: center;
color: white;
}

/* Content Section Styling */


.content {
font-family: "Courier New", Courier, monospace;
font-size: 18px;
line-height: 1.6;
margin: 20px auto;
max-width: 800px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Highlighted Section Styling */


.highlight {
font-family: "Verdana", sans-serif
font-size: 20px;
font-style: italic;
color: #4CAF50;
background-image: url('highlight-bg.jpg');
background-size: contain;
background-repeat: no-repeat;
padding: 10px;
text-align: center;
border: 2px solid #4CAF50;
margin: 10px 0;
}

/* Footer Styling */
.footer {
text-align: center;
font-size: 14px;
padding: 10px;
background-color: #333;
color: white;
}
</style>
</head>
<body>

<div class="header">
Welcome to My Web Page
</div>

<div class="content">
<p>
This is a sample web page that demonstrates the use of
<strong>different font styles</strong>, background images,
and CSS
selectors.
</p>
<p>
By applying <em>CSS styles</em>, we can change how text
appears,
such as using different fonts, colors, and sizes.
</p>

<div class="highlight">
This section uses a unique background image and a different
font
style!
</div>

<p>
CSS allows for easy styling and separation of content and
design.
This makes it easier to create visually appealing web pages.
</p>
</div>
<div class="footer">
All Rights Reserved.
</div>
</body>
</html>

Q8 Write an HTML page with JavaScript that takes a number from one text field in the
range 0-999 and display it in other text field in words.If the number is out of range ,it
should show “out of range” and if it is not a number ,it should show “not a number”
message in the result box.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Number to Words Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type="text"], input[type="button"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.output {
font-weight: bold;
color: #4CAF50;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Number to Words Converter</h2>
<form>
<label for="numberInput">Enter a number (0-999):</label>
<input type="text" id="numberInput" placeholder="Enter a
number">

<input type="button" value="Convert to Words"


onclick="convertToWords()">

<label for="result">Result:</label>
<input type="text" id="result" class="output" readonly>
</form>
</div>

<script>
// Helper function to convert a number to words
function numberToWords(num) {
const ones = ["", "one", "two", "three", "four", "five",
"six", "seven", "eight", "nine"];
const teens = ["", "eleven", "twelve", "thirteen",
"fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"];
const tens = ["", "ten", "twenty", "thirty", "forty",
"fifty", "sixty", "seventy", "eighty", "ninety"];
const hundreds = "hundred";
if (num === 0) return "zero";
let word = "";
// Handle hundreds place
if (Math.floor(num / 100) > 0) {
word += ones[Math.floor(num / 100)] + " " + hundreds + "
";
num %= 100;
}
// Handle teens (11-19)
if (num > 10 && num < 20) {
word += teens[num - 10];
return word.trim();
}
// Handle tens place
if (Math.floor(num / 10) > 0) {
word += tens[Math.floor(num / 10)] + " ";
num %= 10;
}
// Handle ones place
if (num > 0) {
word += ones[num];
}
return word.trim();
}
// Main function to convert input to words
function convertToWords() {
const input =
document.getElementById("numberInput").value.trim();
const resultField = document.getElementById("result");

// Check if the input is a valid number


if (isNaN(input) || input === "") {
resultField.value = "Not a number";
resultField.classList.add("error");
return;
}
const num = parseInt(input);
if (num < 0 || num > 999) {
resultField.value = "Out of range";
resultField.classList.add("error");
return;
}

// Convert the number to words


resultField.value = numberToWords(num);
resultField.classList.remove("error");
}
</script>
</body>
</html>
Q9 Design and implement most basic and simple shopping cart website using HTML,
CSS & JS.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Shopping Cart</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

.container {
max-width: 900px;
margin: auto;
padding: 20px;
}

h1 {
text-align: center;
color: #4CAF50;
}

/* Product List Styling */


.product {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 10px 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}

.product h2 {
margin: 0;
}

.product button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
}

.product button:hover {
background-color: #45a049;
}

/* Cart Section Styling */


.cart {
margin-top: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}

.cart h2 {
margin-top: 0;
}

.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.cart-item span {
font-size: 16px;
}

.cart-total {
text-align: right;
font-size: 18px;
font-weight: bold;
color: #333;
}

.empty-message {
text-align: center;
color: #777;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>Simple Shopping Cart</h1>
<!-- Product List -->
<div id="productList">
<div class="product">
<h2>Product 1</h2>
<span>$10</span>
<button onclick="addToCart('Product 1', 10)">Add to
Cart</button>
</div>
<div class="product">
<h2>Product 2</h2>
<span>$20</span>
<button onclick="addToCart('Product 2', 20)">Add to
Cart</button>
</div>
<div class="product">
<h2>Product 3</h2>
<span>$15</span>
<button onclick="addToCart('Product 3', 15)">Add to
Cart</button>
</div>
</div>

<!-- Cart Section -->


<div id="cart" class="cart">
<h2>Shopping Cart</h2>
<div id="cartItems">
<p class="empty-message">Your cart is empty.</p>
</div>
<div id="cartTotal" class="cart-total"></div>
</div>
</div>

<script>
// Array to store cart items
const cart = [];

// Function to add a product to the cart


function addToCart(productName, productPrice) {
// Add the product to the cart array
cart.push({ name: productName, price: productPrice });

// Update the cart UI


updateCart();
}

// Function to update the cart UI


function updateCart() {
const cartItemsDiv = document.getElementById("cartItems");
const cartTotalDiv = document.getElementById("cartTotal");

// Clear the cart UI


cartItemsDiv.innerHTML = "";

if (cart.length === 0) {
// Display empty message if the cart is empty
cartItemsDiv.innerHTML = '<p class="empty-message">Your
cart is empty.</p>';
cartTotalDiv.textContent = "";
return;
}

let total = 0;

// Generate cart items UI


cart.forEach((item, index) => {
total += item.price;

const cartItemDiv = document.createElement("div");


cartItemDiv.classList.add("cart-item");

cartItemDiv.innerHTML = `
<span>${item.name} - $${item.price}</span>
<button onclick="removeFromCart($
{index})">Remove</button>
`;

cartItemsDiv.appendChild(cartItemDiv);
});

// Display the total price


cartTotalDiv.textContent = `Total: $${total}`;
}

// Function to remove an item from the cart


function removeFromCart(index) {
// Remove the item at the given index
cart.splice(index, 1);

// Update the cart UI


updateCart();
}
</script>
</body>
</html>
Q10 Write JavaScript to validate the following fields of the above registration page.
(1) Name (Name should contains alpha and length should not be less than 6
characters).
(2) Password (Password should not be less than 6 characters length).
(3) E-mail id (should not contain any invalid and must follow the standard
pattern([email protected])
(4) Phone Number (Phone number should contain 10 digits only).

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Registration Form with Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
width: 300px;
margin: 50px auto;
background-color: white;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

h2 {
text-align: center;
color: #333;
}

label {
display: block;
margin: 8px 0 4px;
}

input {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}

.error {
color: red;
font-size: 12px;
}

.success {
color: green;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter
your name">
<div id="nameError" class="error"></div>

<label for="password">Password</label>
<input type="password" id="password" name="password"
placeholder="Enter password">
<div id="passwordError" class="error"></div>

<label for="email">Email</label>
<input type="email" id="email" name="email"
placeholder="Enter your email">
<div id="emailError" class="error"></div>

<label for="phone">Phone Number</label>


<input type="text" id="phone" name="phone" placeholder="Enter
phone number">
<div id="phoneError" class="error"></div>

<button type="submit">Register</button>
</form>
</div>

<script>
// Function to validate the registration form
function validateForm() {
let isValid = true;

// Clear previous errors


document.getElementById("nameError").innerHTML = "";
document.getElementById("passwordError").innerHTML = "";
document.getElementById("emailError").innerHTML = "";
document.getElementById("phoneError").innerHTML = "";
// Get form field values
const name = document.getElementById("name").value;
const password = document.getElementById("password").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;

// Validate Name (should be alphabetic and at least 6


characters)
const nameRegex = /^[A-Za-z]+$/;
if (name.length < 6 || !nameRegex.test(name)) {
document.getElementById("nameError").innerHTML = "Name
must contain only alphabets and be at least 6 characters long.";
isValid = false;
}

// Validate Password (should be at least 6 characters)


if (password.length < 6) {
document.getElementById("passwordError").innerHTML =
"Password must be at least 6 characters long.";
isValid = false;
}

// Validate Email (standard email format)


const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,}$/;
if (!emailRegex.test(email)) {
document.getElementById("emailError").innerHTML = "Please
enter a valid email address (e.g., [email protected]).";
isValid = false;
}

// Validate Phone Number (should be exactly 10 digits)


const phoneRegex = /^[0-9]{10}$/;
if (!phoneRegex.test(phone)) {
document.getElementById("phoneError").innerHTML = "Phone
number must be exactly 10 digits.";
isValid = false;
}

return isValid;
}
</script>
</body>
</html>
Q11-Design a react component that display a number .The number should start at 0 ,and
there should be two button ,one to increase the number by 1 and another to decrease the
number by 1. The current value of the counter should be displayed on the screen
Code-
Q12-Create a React component that contain a form with a text input field for the users name
and a submit button .when the user enter their name and submits the form ,the name should
be displayed on the screen below the form
Code-

You might also like