Scribd
Upload
8 views

web_dev

The document contains HTML and CSS code for a book catalog and shopping cart web pages, including a registration form with JavaScript validation for user inputs. The catalog displays book titles, authors, genres, prices, and availability, while the cart summarizes selected items and total price. Additionally, there are examples of styling links and various cursor styles using CSS.

Uploaded by

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

web_dev

The document contains HTML and CSS code for a book catalog and shopping cart web pages, including a registration form with JavaScript validation for user inputs. The catalog displays book titles, authors, genres, prices, and availability, while the cart summarizes selected items and total price. Additionally, there are examples of styling links and various cursor styles using CSS.

Uploaded by

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

Catalogue Page

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Book Catalog</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to
CSS file -->
</head>
<body>
<h1>Book Catalogue</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Price</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Fiction</td>
<td>$10.99</td>
<td>In Stock</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>Dystopian</td>
<td>$8.99</td>
<td>Out of Stock</td>
</tr>
<!-- Add more book entries as needed -->
</tbody>
</table>
</body>
</html>
CSS CODE:
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1 {
text-align: center;
color: #333;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even)
{
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}

CART PAGE
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Your Cart</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Your Shopping Cart</h1>
</header>
<main>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>$10.99</td>
<td>
<input type="number" value="1"
min="1">
</td>
<td>$10.99</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>$8.99</td>
<td>
<input type="number" value="1"
min="1">
</td>
<td>$8.99</td>
</tr>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>$12.99</td>
<td>
<input type="number" value="1"
min="1">
</td>
<td>$12.99</td>
</tr>
</tbody>
</table>
<div class="cart-summary">
<h2>Cart Summary</h2>
<p>Total Items: 3</p>
<p>Total Price: $32.97</p>
</div>
<button class="checkout-btn">Proceed to
Checkout</button>
</main>
<footer>
<p>&copy; 2024 Your Bookstore</p>
</footer>
</body>
</html>
CSS CODE:
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #FFDE59;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #98F5F9;
}
tr{
background-color: #EFC3CA;
}
}
.total {
font-weight: bold;
font-size: 1.2em;
}
.checkout {
background-color: #FFDE59;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
font-size: 1em;
}
</style>

Write JavaScript to validate the


following fields of the registration
page--As name and password.
HTML 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</title>
<script src="validation.js" defer></script>
</head>
<body>
<h2>Registration Form</h2>
<form name="registrationForm" onsubmit="return
validateForm()">
<label for="name">Name:</label>
<input type="text" id="name"
name="name"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"
name="password"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

Javascript CODE:
function validateForm() {
var name = document.forms["registrationForm"]
["name"].value; var password = document.forms
["registrationForm"] ["password"]
.value;
if (name === "") {
alert("Name must be filled out");
return false;
}
else if (!/^[a-zA-Z\s]+$/.test(name)) {
alert("Name can only contain letters and spaces");
return false;
}
if (password === "") {
alert("Password must be filled out");
return false;
} else if (password.length < 8) {
alert("Password must be at least 8 characters
long");
return false;
}
else if (!/[0-9]/.test(password) && !/[!@#$
%^&*]/.test(password)) {
alert("Password must contain at least one number
or special character");
return false;
}
alert("Registration successful!");
return true;
}
Write JavaScript to validate the following
fields of the above registration page. on
email and phone number.
Html 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</title>
<script src="index.js" defer></script>
</head>
<body>
<h2>Registration Form</h2>
<form name="registrationForm" onsubmit="return
validateForm()">
<label for="email">Email:</label>
<input type="text" id="email"
name="email"><br><br>

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


<input type="text" id="phone"
name="phone"><br><br>

<input type="submit" value="Register">


</form>
</body>
</html>
Javascript CODE:
function validateForm() {
var email = document.forms["registrationForm"]
["email"].value;
var phone = document.forms["registrationForm"]
["phone"].value;

if (email === "") {


alert("Email must be filled out");
return false;
} else if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\
w{2,3})+$/.test(email)) {
alert("Please enter a valid email address");
return false;
}
if (phone === "") {
alert("Phone number must be filled out");
return false;
} else if (!/^\d{10}$/.test(phone)) {
alert("Phone number must be a valid 10-digit
number");
return false;
}
alert("Registration successful!");
return true;
}
Design a web page using CSS (Cascading
Style Sheets) which contain Different font
styles and background image.
html CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body
{
background image:url('images/cse.png');
background-repeat:norepeat;
background position:center
background attachment:fixed;
background color:pink;
}
a:link {
text decoration:none;color:orange;
}
a:visited {
text-decoration:none;color:red;
}
a:hover {
text-decoration:underline;color:blue;
}
a:active {
text decoration:underline;color:purple; }

h3{
color:green; }
.c1{
cursor:crosshair
}
.c2{
cursor:pointer
}
.c3{
cursor:move
}
.c4{
cursor:text
}
.c5{
cursor:wait
}
.c6{
cursor:help
}
</style>
<linkrel="stylesheet"type="text/css"href="style.css">
</head>
<bodybgcolor="cyan">
<h1style="color:blue;text-align:center;">CSS(Inline,
Internal and External) </h1>
<p>ThisParagraphisaNotStyled</p>
<pclass="left">ThisParagraphisStyledbyclass"Left"</
p>
<pclass="center">ThisParagraphisStyledbyclass"Cente
r"</p>
<pclass="right">ThisParagraphisStyledbyclass"Right"<
/p>
<b>ThisisnormalBold</b><br>
<bid="headline">ThisBoldTextisStyled</b>
<h2><b><a href="">Thisisalink</a></b></h2>
<h3class="c1">The
cursoroverthiselementisplussign</h3>
<h3class="c2">Thecursorover
thiselementisapointinghand</h3>
<h3class="c3">Thecursorover thiselement
isagraspinghand</h3>
<h3class="c4">The cursoroverthiselement
isaIbar</h3>
<h3class="c5">Thecursoroverthiselementisawait</
h3>
<h3class="c6">The cursoroverthiselementisa
questionmark</h3>
</html>
css CODE:
p.left
{
text align:left;
color:blue;
font family:Cambria;
font size:large;
text-indent:20px;
}
p.center
{
text-align:center;
text decoration:underline;
text-transform:uppercase;
letter spacing:-3px;
word spacing:20px;
font size:larger;
}
p.right
{
textalign:right;
color:red;
fontfamily:Tahoma;
fontsize:15pt;
textdecoration:overline;
fontstyle:italic;
}
b#headline
{
color:orange;
fontsize:22px;
fontfamily:arial;
text-decoration:underline;
}
CSS: for controlling the background
image and define the style links.
html CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<style
type="text/css
">body
{
background image:url('images/cse.png');
background-repeat:no repeat;
background position:center center;
background attachment:fixed;
background color:cyan;
}
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
<linkrel="stylesheet"type="text/css"href="style.css">
</head>
<body>
<h2 style="color: cyan;">Styling Links</h2>
<p style="color: orange;">Mouse over the links and
watch them change layout:</p>
<p><b><a class="one" href="default.asp"
target="_blank">This link changes
color</a></b></p>
<p><b><a class="two" href="default.asp"
target="_blank">This link changes font
size</a></b></p>
<p><b><a class="three" href="default.asp"
target="_blank">This link changes background
color</a></b></p>
<p><b><a class="four" href="default.asp"
target="_blank">This link changes font
family</a></b></p>
<p><b><a class="five" href="default.asp"
target="_blank">This link changes text
decoration</a></b></p>
</body>
</html>
css CODE:
p.left
{
text align: left;
color:blue;
font family:Cambria;
font size:large;
text-indent:20px;
}
p.center
{
text-align:center;
textdecoration:underline;
text transform:uppercase;
letterspacing:-3px;
wordspacing:20px;
font size:larger;
}
p.right
{
textalign:right;
color:red;
fontfamily:Tahoma;
fontsize:15pt;
text decoration:overline;
fontstyle:italic;
}
b#headline
{
color:orange;
font size:22px;
font family:arial;
text-decoration:underline;
}

You might also like