Scribd
Upload
4 views24 pages

AryanWeb File

The document outlines the design specifications for a static web pages project for an online book store, including a homepage, login page, registration page, and catalogue page. Each page contains specific elements such as navigation links, forms for user input, and a layout using HTML and CSS. The catalogue page is particularly detailed, requiring a table with book information including cover images, authors, publishers, prices, and an 'Add to cart' button.

Uploaded by

adarshgautam5760
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
4 views24 pages

AryanWeb File

The document outlines the design specifications for a static web pages project for an online book store, including a homepage, login page, registration page, and catalogue page. Each page contains specific elements such as navigation links, forms for user input, and a layout using HTML and CSS. The catalogue page is particularly detailed, requiring a table with book information including cover images, authors, publishers, prices, and an 'Add to cart' button.

Uploaded by

adarshgautam5760
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/ 24

Web Designing Workshop

Problem:- Design the following static web pages required for an


online books website
HOMEPAGE,LOGINPAGE,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. 2. Author Name. 3. Publisher. 4. Price. 5. Add to cart button,
REGISTRATION PAGE

HOME PAGE
<frameset rows="40%,*">
<frame src="top.html" noresize scrolling="NO" name="topframe">
<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>
Top.html
<html>
<head>
<title>Top Frame</title>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: blueviolet;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: blue;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body bgcolor="tomato">
<img src="Logo.jpg" width="125" height="115" align="left">
<img src="OIG1.jpg" width="125" height="115" align="right">
<center>
<marquee width="985" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book
Store</i></b>
</font>
</marquee> <br>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

<font face="Brush Script" size="6" color="white"><b>Created and maintained by


Aryan Maheshwari</b></font>
</center>
<br>
<table width="100%" height="75%" cellspacing=10>
<tr align="center">
<td> <a href="Home.html" target="_parent"><font face="Brush Script" size="5"
>HOME </a> </td>
<td> <a href="login.html" target="rightframe"><font face="Brush Script"
size="5" >LOGIN</a> </td>
<td> <a href="registration.html" target="rightframe"> <font face="Brush
Script"
size="5">REGISTER </a> </td>
<td> <a href="catalogue.html" target="rightframe"> <font face="Brush Script"
size="5">CATALOGUE</a> </td>
</tr>
</table>
</body>
</html>
Right.html
<html>
<body bgcolor="orange">
<center>
<img src="OIG3.jpg" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></font><br />
<font face="Brush Script MT" size="5" color="red">
<h2><b> "A Huge Collection Of Engineering E-Books"</b></h2></font>
</center>
</body>
</html>
Left.html
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: blueviolet;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: blue;
background-color: transparent;
text-decoration: underline;
}
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

</style>
</head>
<body align="center" bgcolor="yellow"> <br>
<a href="cse.html" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font size="6">CE</font></a><br>
</body>
</html>

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background: linear-gradient(to bottom, #fd746c, #ff9068);
/* Background gradient */
font-family: Arial, sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

.login-container {
background-color: rgba(255, 255, 255, 0.8);
/* Semi-transparent white background */
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
/* Shadow effect */
}

.login-logo {
width: 150px;
margin: 0 auto 20px;
/* Center logo */
display: block;
}

.form-control {
border-radius: 25px;
/* Rounded input fields */
}

.btn-primary {
border-radius: 25px;
/* Rounded submit button */
}
</style>
</head>

<body>
<div class="login-container">
<img src="download (2).jpg" alt="Login" class="login-logo">
<form name="loginForm" method="post" action="right.html" onsubmit="return
validateForm()">
<div class="form-group">
<input type="text" class="form-control" name="t1" placeholder="Login ID">
</div>
<div class="form-group">
<input type="password" class="form-control" name="t2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<!-- Bootstrap JS Bundle --><script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js
"></script><script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></sc
ript><script>
function validateForm() {
var loginId = document.forms["loginForm"]["t1"].value;
var password = document.forms["loginForm"]["t2"].value;
if (loginId.trim() === "" || password.trim() === "") {
alert("Please enter both Login ID and Password");
return false;}
return true;}
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

</script>
</body>

</html>

Register.html
<!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>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #E4F0F8;
font-family: Arial, sans-serif;
}

.heading {
color: blue;
font-size: 24px;
}

.red {
color: red;
}

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

.redblue {
color: #FF5733;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<center><span class="heading">Registration Form</span></center><br<form
name="registrationForm" action="right.html" onsubmit="return validateForm()">
<div class="form-group">
<label for="firstname">First Name<span class="red">*</span></label>
<input type="text" class="form-control" id="firstname">
</div>
<div class="form-group">
<label for="lastname">Last Name<span class="red">*</span></label>
<input type="text" class="form-control" id="lastname" required>
</div>
<div class="form-group">
<label for="email">Email Address<span class="red">*</span></label>
<input type="email" class="form-control" id="email" required>
<small class="form-text text-muted">(one e-mail id only) e.g.
[email protected]</small>
</div>
<div class="form-group">
<label for="pass">Password (minimum 6 characters)<span
class="red">*</span></label>
<input type="password" class="form-control" id="pass" required minlength="6">
</div>
<div class="form-group">
<label for="addr">Address<span class="red">*</span></label>
<textarea class="form-control" id="addr" rows="2" required></textarea>
</div>
<div class="form-group">
<label for="mobileno">Mobile No<span class="red">*</span></label>
<input type="text" class="form-control" id="mobileno" required>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female">
<label class="form-check-label" for="female">Female</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-secondary">Reset</button>
</form>
</div>
</div>
</div>
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

<!-- Bootstrap JS Bundle -->


<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js
"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></sc
ript>
<script>
function validateForm() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var email = document.getElementById('email').value;
var pass = document.getElementById('pass').value;
var addr = document.getElementById('addr').value;
var mobileno = document.getElementById('mobileno').value;
var gender = document.querySelector('input[name="gender"]:checked');

if (firstname.length < 6) {
alert('First Name must be at least 6 characters long.');
return false;
}

if (!gender) {
alert('Please select a gender.');
return false;
}

return true;
}
</script>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

Catalogue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 50px auto;
}

.book {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
}
.book img {
width: 100px;
height: 100px;
margin-right: 20px;
border-radius: 5px;
}

.book-info {
flex: 1;
}

.book-info p {
margin: 5px 0;
color: #333;
}

.book-price {
font-size: 18px;
color: #007bff;
}

.btn-primary {
background-color: #007bff;
border: none;
border-radius: 5px;
padding: 8px 16px;
color: #fff;
cursor: pointer;
transition: background-color 0.3s;}
.btn-primary:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

<div class="col-md-12">
<div class="book">
<img src="download.jpg" alt="Web Technologies">
<div class="book-info">
<p><strong>Book:</strong> Web Technologies</p>
<p><strong>Author:</strong> Uttam K. Roy</p>
<p><strong>Publication:</strong> Oxford University Press</p>
</div>
<div class="book-price">Rs.531</div>
<button type="button" class="btn btn-primary" onclick="addToCart('Web
Technologies')">Add to Cart</button>
</div>
<div class="book">
<img src="download (1).jpg" alt="PHP & MySQL Web Development">
<div class="book-info">
<p><strong>Book:</strong> PHP & MySQL Web Development</p>
<p><strong>Author:</strong> Luke Welling & Laura Thompson</p>
<p><strong>Publication:</strong> PEARSON</p>
</div>
<div class="book-price">Rs.898</div>
<button type="button" class="btn btn-primary" onclick="addToCart('PHP & MySQL
Web Development')">Add to Cart</button>
</div>
</div>
</div>
</div>
<script>
function addToCart(bookName) {
if (confirm("Do you want to add '" + bookName + "' to your cart?")) {
// Perform any additional actions here, such as adding the book to the cart
alert("'" + bookName + "' added to cart successfully!");
}
}
</script>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

Cse.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: cyan;
}
h1 {
color: blue;
text-align: center;
}
table {
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
}
td {
padding: 10px;
}
select, input[type="text"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
width: 100%;
}
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

input[type="submit"] {
padding: 8px;
border: none;
border-radius: 4px;
font-size: 16px;
width: 100%;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #4CAF50;
}
pre {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="mb-4">Computer Science and Engineering</h1>
<form id="orderForm" action="order.html">
<table class="table">
<tr>
<td>Text Books</td>
<td>
<select class="form-select">
<option value="select the book" selected>Select the book</option>
<option value="C&Ds">C&Ds</option>
<option value="Ads">Ads</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
<option value="Ms SQL Server">Ms SQL Server</option>
<option value="MySql">MySql</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="quantity" class="form-control"></td>
</tr>
<tr>
<td></td>
<td>
<button type="button" class="btn btn-primary"
onclick="showConfirmation()">OK</button>
</td>
</tr>
</table>
</form>
<div id="confirmationModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-


label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to place this order?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
onclick="submitForm()">Confirm</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS Bundle -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showConfirmation() {
var quantity = document.getElementById("quantity").value;
if (quantity.trim() === "") {
alert("Please enter quantity.");
return;
}
var modal = new
bootstrap.Modal(document.getElementById('confirmationModal'));
modal.show();
}

function submitForm() {
document.getElementById("orderForm").submit();
}
</script>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

ECE.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: cyan;
}

h1 {
color: blue;
text-align: center;
}
table {
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
}

td {
padding: 10px;
}
select, input[type="text"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

font-size: 16px;
width: 100%;
}
input[type="submit"] {
padding: 8px;
border: none;
border-radius: 4px;
font-size: 16px;
width: 100%;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #4CAF50;
}
pre {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="mb-4">Electronics and Communication Engineering</h1>
<form id="orderForm" action="order.html">
<table class="table">
<tr>
<td>Text Books</td>
<td>
<select class="form-select">
<option value="select the book" selected>Select the book</option>
<option value="Digital Electronics">Digital Electronics</option>
<option value="Electronics Circuit">Electronics Circuit</option>
<option value="Analog and digital communication">Analog and digital
communication</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="quantity" class="form-control"></td>
</tr>
<tr>
<td></td>
<td>
<button type="button" class="btn btn-primary"
onclick="showConfirmation()">OK</button>
</td>
</tr>
</table>
</form>
<div id="confirmationModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

<h5 class="modal-title">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to place this order?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
onclick="submitForm()">Confirm</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showConfirmation() {
var quantity = document.getElementById("quantity").value;
if (quantity.trim() === "") {
alert("Please enter quantity.");
return;
}
var modal = new
bootstrap.Modal(document.getElementById('confirmationModal'));
modal.show();}
function submitForm() {
document.getElementById("orderForm").submit();}
</script>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

EEE.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: cyan;
}

h1 {
color: blue;
text-align: center;
}

table {
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
}

td {
padding: 10px;
}

select, input[type="text"] {
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
width: 100%;
}

input[type="submit"] {
padding: 8px;
border: none;
border-radius: 4px;
font-size: 16px;
width: 100%;
cursor: pointer;
transition: background-color 0.3s;
}

input[type="submit"]:hover {
background-color: #4CAF50;
}

pre {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="mb-4">Electrical and Electronics Engineering</h1>
<form id="orderForm" action="order.html">
<table class="table">
<tr>
<td>Text Books</td>
<td>
<select class="form-select">
<option value="select the book" selected>Select the book</option>
<option value="Basic Electrical Engineering">Basic Electrical
Engineering</option>
<option value="Applied Electronics">Applied Electronics</option>
<option value="Network Theory">Network Theory</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="quantity" class="form-control"></td>
</tr>
<tr>
<td></td>
<td>
<button type="button" class="btn btn-primary"
onclick="showConfirmation()">OK</button>
</td>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

</tr>
</table>
</form>
<div id="confirmationModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to place this order?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
onclick="submitForm()">Confirm</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS Bundle -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showConfirmation() {
var quantity = document.getElementById("quantity").value;
if (quantity.trim() === "") {
alert("Please enter quantity.");
return;
}
var modal = new
bootstrap.Modal(document.getElementById('confirmationModal'));
modal.show();
}
function submitForm() {
document.getElementById("orderForm").submit();
}</script>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

mech.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: cyan;
}

h1 {
color: blue;
text-align: center;
}

table {
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
}

td {
padding: 10px;
}

select, input[type="text"] {
padding: 8px;
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

border: 1px solid #ccc;


border-radius: 4px;
font-size: 16px;
width: 100%;
}
input[type="submit"] {
padding: 8px;
border: none;
border-radius: 4px;
font-size: 16px;
width: 100%;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #4CAF50;
}
pre {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="mb-4">Civil Engineering</h1>
<form id="orderForm" action="order.html">
<table class="table">
<tr>
<td>Text Books</td>
<td>
<select class="form-select">
<option value="select the book" selected>Select the book</option>
<option value="Structural Analysis">Structural Analysis</option>
<option value="Soil Mechanics">Soil Mechanics</option>
<option value="Mechanics of Materials">Mechanics of Materials</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="quantity" class="form-control"></td>
</tr>
<tr>
<td></td>
<td>
<button type="button" class="btn btn-primary"
onclick="showConfirmation()">OK</button>
</td>
</tr>
</table>
</form>
<div id="confirmationModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
Computer Science And Engineering Department
Rajkiya Engineering College , Kannauj
Web Designing Workshop

<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to place this order?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
onclick="submitForm()">Confirm</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showConfirmation() {
var quantity = document.getElementById("quantity").value;
if (quantity.trim() === "") {
alert("Please enter quantity.");
return;
}
var modal = new
bootstrap.Modal(document.getElementById('confirmationModal'));
modal.show();}
function submitForm() {
document.getElementById("orderForm").submit();
}
</script>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

Order.html
<html>
<head><title>order conformation</title></head>
<body bgcolor="cyan">
<center>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU...Visit Again</h2>
</center>
</body>
</html>

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj
Web Designing Workshop

Computer Science And Engineering Department


Rajkiya Engineering College , Kannauj

You might also like