-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 85c6048
Showing
4 changed files
with
260 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
// app.js | ||
$(document).ready(() => { | ||
const renderBooks = () => { | ||
const $booksList = $("#books-list"); | ||
$booksList.empty(); | ||
getBooks().forEach((book) => { | ||
$booksList.append(` | ||
<li data-id="${book.id}"> | ||
<span>${book.title} by ${book.author} (${book.yearPublished})</span> | ||
<div> | ||
<button class="btn btn-secondary read-btn">Read</button> | ||
<button class="btn btn-secondary edit-btn">Edit</button> | ||
<button class="btn btn-danger delete-btn">Delete</button> | ||
</div> | ||
</li> | ||
`); | ||
}); | ||
}; | ||
|
||
$("#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(); | ||
}); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Book Manager</title> | ||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | ||
<script src="data.js"></script> | ||
<script src="app.js"></script> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<header> | ||
<h1>Book Manager</h1> | ||
<p>Manage your library efficiently with our simple CRUD app.</p> | ||
</header> | ||
|
||
<!-- Create Section --> | ||
<section id="create-section"> | ||
<h2>Add a New Book</h2> | ||
<form id="create-form" class="form"> | ||
<input type="text" id="title" placeholder="Title" required> | ||
<input type="text" id="author" placeholder="Author" required> | ||
<input type="number" id="yearPublished" placeholder="Year Published" required> | ||
<button type="submit" class="btn btn-primary">Add Book</button> | ||
</form> | ||
<div id="status" class="status"></div> | ||
</section> | ||
|
||
<!-- Books List Section --> | ||
<section id="books-section"> | ||
<h2>Books List</h2> | ||
<ul id="books-list" class="book-list"></ul> | ||
</section> | ||
|
||
<!-- Update Modal --> | ||
<div id="update-modal" class="modal"> | ||
<div class="modal-content"> | ||
<span class="close-btn">×</span> | ||
<h2>Update Book</h2> | ||
<form id="update-form" class="form"> | ||
<input type="hidden" id="update-id"> | ||
<input type="text" id="update-title" placeholder="Title" required> | ||
<input type="text" id="update-author" placeholder="Author" required> | ||
<input type="number" id="update-yearPublished" placeholder="Year Published" required> | ||
<button type="submit" class="btn btn-primary">Update Book</button> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
|