Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
kvallada committed Dec 3, 2024
0 parents commit 85c6048
Show file tree
Hide file tree
Showing 4 changed files with 260 additions and 0 deletions.
82 changes: 82 additions & 0 deletions app.js
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();
});

53 changes: 53 additions & 0 deletions cruud.html
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">&times;</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>
12 changes: 12 additions & 0 deletions data.js
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;
}

113 changes: 113 additions & 0 deletions styles.css
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;
}

0 comments on commit 85c6048

Please sign in to comment.