project book store code

<!
doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.c
ss" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuC
OmLASjC" crossorigin="anonymous">
<title>Book Store</title>
<style>
body {
background-color: #f8f9fa;
}
nav {
background: linear-gradient(90deg, #4b79a1, #283e51);
}
.navbar-brand, .nav-link {
color: white !important;
}
h1, h2 {
color: #4b79a1;
}
.table-dark {
background-color: #283e51;
color: white;
}
.btn-primary {
background-color: #4b79a1;
border: none;
animation: blink 1s infinite alternate;
}
.btn-primary:hover {
background-color: #283e51;
}
.fade-in {
animation: fadeIn 2s;
}
.row-appear {
animation: rowAppear 1.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
@keyframes rowAppear {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Book Store</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#available-books">Available
Books</a>
</li>
</ul>
<div>
<a class="nav-link" href="#register-form">New Book Register</a>
</div>
</div>
</div>
</nav>
<div class="container my-5">

<h1 class="text-center fade-in">
"Welcome to Book Store"
</h1>


<section id="register-form" class="my-5">
<h2 class="text-center">Register a New Book</h2>
<form class="row g-3 mt-4" id="bookForm">
<div class="col-md-6">
<label for="bookTitle" class="form-label">Book Title</label>
<input type="text" class="form-control" id="bookTitle"
placeholder="Enter book title" required>
</div>
<label for="authorName" class="form-label">Author Name</label>
<input type="text" class="form-control" id="authorName"
placeholder="Enter author name" required>
</div>
<label for="genre" class="form-label">Genre</label>
<input type="text" class="form-control" id="genre"
placeholder="Enter genre" required>
</div>
<label for="price" class="form-label">Price</label>
<input type="number" class="form-control" id="price"
placeholder="Enter price" required>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary">Register
Book</button>
</div>
</form>
</section>


<section id="available-books" class="my-5">
<h2 class="text-center">Available Books</h2>
<div class="table-responsive mt-4">
<table class="table table-bordered table-hover" id="booksTable">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Genre</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="row-appear">
<th scope="row">1</th>
<td>Dreamcatcher</td>
<td>Stephen King</td>
<td>Horror</td>
<td>Rs:270/-</td>
</tr>
<td>The Time Machine</td>
<td>H.G. Wells</td>
<td>Science Fiction</td>
<td>Rs:999/-</td>
</tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>Classic</td>
<td>Rs:430/-</td>
</tr>
<td>The Alchemist</td>
<td>Paulo Coelho</td>
<td>Philosophical</td>
<td>Rs:399/-</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.
min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
const bookForm = document.getElementById('bookForm');
const booksTable =
document.getElementById('booksTable').querySelector('tbody');
bookForm.addEventListener('submit', (e) => {

e.preventDefault();
const title = document.getElementById('bookTitle').value;

const author = document.getElementById('authorName').value;
const genre = document.getElementById('genre').value;
const price = document.getElementById('price').value;
const newRow = document.createElement('tr');

newRow.classList.add('row-appear');
newRow.innerHTML = `
<th scope="row">${booksTable.children.length + 1}</th>
<td>${title}</td>
<td>${author}</td>
<td>${genre}</td>
<td>Rs:${price}/-</td>
`;
booksTable.appendChild(newRow);
bookForm.reset();
});
</script>
</body>
</html>

project book store code

Uploaded by

Copyright:

Available Formats

project book store code

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

project book store code

Uploaded by

Copyright:

Available Formats

<!

<div class="container my-5">

bookForm.addEventListener('submit', (e) => {

const title = document.getElementById('bookTitle').value;

const newRow = document.createElement('tr');

You might also like