From 85c6048c565956332604088f4b20f69803c1ca26 Mon Sep 17 00:00:00 2001 From: Kristopher Scott Valladares Date: Tue, 3 Dec 2024 18:08:32 -0500 Subject: [PATCH] Add files via upload --- app.js | 82 ++++++++++++++++++++++++++++++++++++++ cruud.html | 53 +++++++++++++++++++++++++ data.js | 12 ++++++ styles.css | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 260 insertions(+) create mode 100644 app.js create mode 100644 cruud.html create mode 100644 data.js create mode 100644 styles.css 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 + + + + + + +
    +
    +

    Book Manager

    +

    Manage your library efficiently with our simple CRUD app.

    +
    + + +
    +

    Add a New Book

    +
    + + + + +
    +
    +
    + + +
    +

    Books List

    +
      +
      + + + +
      + + 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