diff --git a/app.js b/app.js
new file mode 100644
index 0000000..7c692ae
--- /dev/null
+++ b/app.js
@@ -0,0 +1,82 @@
+// app.js
+$(document).ready(() => {
+ const renderBooks = () => {
+ const $booksList = $("#books-list");
+ $booksList.empty();
+ getBooks().forEach((book) => {
+ $booksList.append(`
+
+ ${book.title} by ${book.author} (${book.yearPublished})
+
+
+
+
+
+
+ `);
+ });
+ };
+
+ $("#create-form").submit((e) => {
+ e.preventDefault();
+ const title = $("#title").val();
+ const author = $("#author").val();
+ const yearPublished = parseInt($("#yearPublished").val());
+ const id = books.length ? books[books.length - 1].id + 1 : 1;
+
+ books.push({ id, title, author, yearPublished });
+ renderBooks();
+ $("#status").text("Book added successfully!").fadeIn().delay(2000).fadeOut();
+ $("#create-form")[0].reset();
+ });
+
+ $(document).on("click", ".read-btn", function () {
+ const id = $(this).closest("li").data("id");
+ const book = books.find((b) => b.id === id);
+ alert(`Title: ${book.title}\nAuthor: ${book.author}\nYear Published: ${book.yearPublished}`);
+ });
+
+ $(document).on("click", ".delete-btn", function () {
+ const id = $(this).closest("li").data("id");
+ const index = books.findIndex((b) => b.id === id);
+ books.splice(index, 1);
+ renderBooks();
+ $("#status").text("Book deleted successfully!").fadeIn().delay(2000).fadeOut();
+ });
+
+ $(document).on("click", ".edit-btn", function () {
+ const id = $(this).closest("li").data("id");
+ const book = books.find((b) => b.id === id);
+
+ $("#update-id").val(book.id);
+ $("#update-title").val(book.title);
+ $("#update-author").val(book.author);
+ $("#update-yearPublished").val(book.yearPublished);
+
+ $("#update-modal").fadeIn();
+ });
+
+ $(".close-btn").click(() => {
+ $("#update-modal").fadeOut();
+ });
+
+ $("#update-form").submit((e) => {
+ e.preventDefault();
+ const id = parseInt($("#update-id").val());
+ const title = $("#update-title").val();
+ const author = $("#update-author").val();
+ const yearPublished = parseInt($("#update-yearPublished").val());
+
+ const book = books.find((b) => b.id === id);
+ book.title = title;
+ book.author = author;
+ book.yearPublished = yearPublished;
+
+ renderBooks();
+ $("#update-modal").fadeOut();
+ $("#status").text("Book updated successfully!").fadeIn().delay(2000).fadeOut();
+ });
+
+ renderBooks();
+ });
+
\ No newline at end of file
diff --git a/cruud.html b/cruud.html
new file mode 100644
index 0000000..4b84d79
--- /dev/null
+++ b/cruud.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Book Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ×
+
Update Book
+
+
+
+
+
+
diff --git a/data.js b/data.js
new file mode 100644
index 0000000..f9f3059
--- /dev/null
+++ b/data.js
@@ -0,0 +1,12 @@
+// data.js
+const books = [
+ { id: 1, title: "To Kill a Mockingbird", author: "Harper Lee", yearPublished: 1960 },
+ { id: 2, title: "1984", author: "George Orwell", yearPublished: 1949 },
+ { id: 3, title: "The Great Gatsby", author: "F. Scott Fitzgerald", yearPublished: 1925 },
+ ];
+
+ // Function to return the array
+ function getBooks() {
+ return books;
+ }
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..af460bc
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,113 @@
+/* styles.css */
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f4f9;
+ margin: 0;
+ padding: 0;
+ }
+
+ .container {
+ max-width: 800px;
+ margin: 20px auto;
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ h1 {
+ margin: 0;
+ color: #333;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+
+ form {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+
+ input, button {
+ padding: 10px;
+ font-size: 14px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+
+ input:focus, button:focus {
+ outline: none;
+ border-color: #007BFF;
+ }
+
+ button {
+ background-color: #007BFF;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background-color: #0056b3;
+ }
+
+ .book-list {
+ list-style: none;
+ padding: 0;
+ }
+
+ .book-list li {
+ display: flex;
+ justify-content: space-between;
+ padding: 10px;
+ background: #f9f9f9;
+ margin-bottom: 8px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ }
+
+ .book-list button {
+ margin-left: 10px;
+ }
+
+ .status {
+ margin-top: 10px;
+ color: green;
+ }
+
+ .modal {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80%;
+ max-width: 400px;
+ background: #fff;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ }
+
+ .modal-content {
+ padding: 20px;
+ }
+
+ .close-btn {
+ float: right;
+ font-size: 20px;
+ color: #888;
+ cursor: pointer;
+ }
+
+ .close-btn:hover {
+ color: #000;
+ }
+
\ No newline at end of file