Additional Experiment 17

ADDITIONAL EXPERIMENT
HTML Table CRUD operation Using JavaScript

Sourcecode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/
all.min.css" integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnW
Mn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Sagleaf Books</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0px 80px 100px 80px;
background-color:rgb(85,0,78);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
box-shadow: 0 0 10px 3px #FFBD59;
border: 1.5px solid whitesmoke;
}
th, td {
border: 1px solid white;
padding: 8px;
color: whitesmoke;
font-weight: bold;
text-align: center;
}
th {
background-color: #FFBD59;
color: black;
text-align: center;
border-bottom: 1.5px solid whitesmoke;
}
.edit-btn, .delete-btn {
cursor: pointer;
color: black;
display: inline-block;
margin-right: 5px;
}
.edit-btn:hover, .delete-btn:hover,.cancel-btn:hover{
transform: scale(1.2);
}
#app label{
font-size: 20px;
color: white;
font-weight: bold;
text-shadow:0 0 5px #FFBD59,0 0 2px black;
}
#app input {
width: 90%;
height: 30px;
border: 2px solid black;
outline: none;
}
input:hover,input:focus{
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.modal-content {
background-color:rgb(85,0,78);
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
border-radius: 10px;
}
.modal label {
display: block;
margin-top: 5px;
}
.modal-content button {
margin-top: 20px;
cursor: pointer;
border: 1.5px solid black;
font-size: 16px;
}
*,*::before,*::after{
box-sizing: border-box;
}
.animated-icon {
width: 15em;
height: 8.4em;
padding: 2em 1em;
position: relative;
}
.animated-icon .page {
transform-origin: right;
position: absolute;
top: 4em;
left: 2em;
height: 5.5em;
background-color: #ffbd59;
z-index: 10;
width: 5.5em;
transform: rotateY(0deg) skewY(15deg) scaleX(0.8);
transform-style: preserve-3d;
}
.animated-icon .page::before,
.animated-icon .page::after {
content: '';
position: absolute;
top: -0.25em;
left: -0.25em;
background-color: #ffbd59;
transform-origin: right;
transform-style: preserve-3d;
z-index: 100;
height: 5.5em;
width: 5.5em;
}
.animated-icon .page::before {
animation: turn 2s ease-in-out infinite;
}
.animated-icon .page::after {
}
}
}
@-webkit-keyframes turn {
0% { transform: rotateY(180deg) skewY(25deg) scaleX(0.95); }
40% { transform: rotateY(0deg) skewY(0) scaleX(0.95); }
100% { transform: rotateY(0deg) skewY(0) scaleX(0.95); }
}
@keyframes turn {
0% {
}
40% {
transform: rotateY(0deg) skewY(0) scaleX(0.95);
}
100% {
transform: rotateY(0deg) skewY(0) scaleX(0.95);
}
}
</style>
</head>
<body>
<center><div class="animated-icon">
<div class="page"></div>
</div></center>
<center><h1 style="color:white;font-family: Cambria,serif;font-size: 30px;font-weight:
bold;"><u>Sag<span style="color:#FFBD59;">leaf</u></span>
<u>Books</u></h1></center><br>
<div id="app">
<div style="border: 2px solid white;padding: 10px;box-shadow: 0 0 10px 3px
#FFBD59;"><br>
<label style="margin-left: 60px;" for="bookName">Book Name:</label>
<center><input type="text" id="bookName" v-model="newBook.bookName"
required></center><br>
<label style="margin-left: 60px;" for="author">Author:</label>
<center><input type="text" id="author" v-model="newBook.author"
required></center><br>
<label style="margin-left: 60px;" for="genre">Genre:</label>
<center><input type="text" id="genre" v-model="newBook.genre" required></center><br>
<label style="margin-left: 60px;" for="cost">Cost:</label>
<center><input type="number" id="cost" v-model="newBook.cost" required></center><br>
<center><button @click="addBook"
onmouseover="this.style.background='radial-gradient(circle, rgba(255,189,89,1) 10%,
rgba(85,0,78,1) 100%)';this.style.color='black'"
onmouseout="this.style.background='#FFBD59';this.style.color='black'"
style="width: 90%;margin-top: 10px;cursor: pointer;font-size: 20px;padding: 5px;border:
1.5px solid black;background-color: #FFBD59;color: black;border-radius: 3px;box-shadow:
0 0 6px 3px whitesmoke;"><b>Add Book</b></button><br><br>
</div></center>
<div><br>
<h1 style="text-align: center;color: whitesmoke;text-shadow: 0 0 5px #FFBD59;"><u>Book
List</u></h1>
<table>
<thead>
<tr>
<th>Index</th>
<th>Book Name</th>
<th>Author</th>
<th>Genre</th>
<th>Cost</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in books" :key="book.id">
<td>{{ index + 1 }}</td>
<td>{{ book.bookName }}</td>
<td>{{ book.author }}</td>
<td>{{ book.genre }}</td>
<td>{{ book.cost }}</td>
<td>
<span class="edit-btn" @click="showEditContainer(index)"> <i class="fa fa-pen-to-
square"style="color:green;border: 1px solid white;padding: 5px;background:
white;"></i></span>
</td>
<td>
<span class="delete-btn" @click="deleteBook(index)"><i class="fa-solid fa-trash"
style="color:red;border: 1px solid white;padding: 5px;background: white;"></i> </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal" id="editContainer">
<div class="modal-content">
<h2 style="color: #FFBD59;"><u>Edit Book</u></h2>
<label for="editBookName" >Book Name:</label><br>
<input type="text" id="editBookName" style="width: 70%;" v-
model="selectedBook.bookName" required><br>
<label for="editAuthor">Author:</label><br>
<input type="text" id="editAuthor" style="width: 70%;" v-model="selectedBook.author"
required><br>
<label for="editGenre">Genre:</label><br>
<input type="text" id="editGenre" style="width: 70%;" v-model="selectedBook.genre"
required><br>
<label for="editCost">Cost:</label><br>
<input type="number" id="editCost" style="width: 70%;" v-model="selectedBook.cost"
required><br>
<button class="edit-btn" @click="updateBook" style="background:
#26A69A;color:white;width: 80px;height: 40px;"></i>Edit</button>
<button class="cancel-btn" @click="closeEditContainer" style="background:
red;color:white;width: 80px;height: 40px;">Close</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
newBook: {
bookName: '',
author: '',
genre: '',
cost: ''
},
selectedBook: {
id: 0,
bookName: '',
author: '',
genre: '',
cost: 0
},
books: [
{ id: 1, bookName: 'It Ends with Us', author: 'Colleen Hoover', genre: ' Fiction', cost: 290 },
]
},
methods: {
addBook: function () {
if (
this.newBook.bookName.trim() === '' ||
this.newBook.author.trim() === '' ||
this.newBook.genre.trim() === '' ||
this.newBook.cost === ''
){
alert('Please fill in all details.');
return;
}
const newBook = {
id: this.books.length + 1,
bookName: this.newBook.bookName.trim(),
author: this.newBook.author.trim(),
genre: this.newBook.genre.trim(),
cost: parseFloat(this.newBook.cost)
};
this.books.push(newBook);
this.newBook.bookName = '';
this.newBook.author = '';
this.newBook.genre = '';
this.newBook.cost = '';
},
showEditContainer: function (index) {
this.selectedBook = { ...this.books[index] };
document.getElementById('editContainer').style.display = 'flex';
},
updateBook: function () {
const index = this.books.findIndex(book => book.id === this.selectedBook.id);
this.books[index].bookName = this.selectedBook.bookName.trim();
this.books[index].author = this.selectedBook.author.trim();
this.books[index].genre = this.selectedBook.genre.trim();
this.books[index].cost = this.selectedBook.cost;
document.getElementById('editContainer').style.display = 'none';
},
closeEditContainer: function () {
document.getElementById('editContainer').style.display = 'none';
},
deleteBook: function (index) {
const confirmDelete = confirm('Are you sure you want to delete this book?');
if (confirmDelete) {
this.books.splice(index, 1);
}
}
}
});
</script>
</body>
</html>

Additional Experiment 17

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Additional Experiment 17

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

Additional Experiment 17

Uploaded by

Copyright:

Available Formats

ADDITIONAL EXPERIMENT

HTML Table CRUD operation Using JavaScript

You might also like