kyle.belanger/top-javascript-projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

working on model dialog to add book

Browse source 
have completed dialog and lightlty styled. Working
on completing the JS
This commit is contained in:
kyle 2025-01-05 08:51:02 -05:00
parent ce84054a7a
commit b858ebc4a2
2 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
library-app/index.html
View file

@ -13,32 +13,27 @@
<button class="mr-8 bg-blue-400 p-2 border border-slate-300 rounded-xl text-white" id="addBook">Add Book</button>
</div>
<div class="container grid grid-cols-3 gap-4 mx-auto p-6" id="main">
<div class="p-6 border border-slate-300 bg-white rounded-xl shadow-xl flex flex-col gap-x-4">
<h3>Book Title</h3>
<p>Book Author</p>
<p>Total Pages: 300</p>
<p>Have Read</p>
</div>
<div class="p-6 border border-slate-300 bg-white rounded-xl shadow-xl flex flex-col gap-x-4">
<h3>Book Title</h3>
<p>Book Author</p>
<p>Total Pages: 300</p>
<p>Have Read</p>
</div>
<div class="container grid grid-cols-3 gap-4 mx-auto p-6" id="main"></div>
</div>
<dialog>
<form>
<label for="title">Book Title</label>
<input type="text" name="title" id="title">
<label for="author">Author</label>
<input type="text" name="author" id="author">
<label for="pages">Total Pages</label>
<input type="number" name="pages" id="pages">
<label for="haveread">Read Book?</label>
<input type="checkbox" name="haveread" id="haveread">
<dialog class="w-3/5 p-2 border border-slate-300 rounded-xl">
<form class="flex flex-col min-w-full gap-4">
<div class="flex gap-4">
<label for="title">Book Title</label>
<input type="text" name="title" id="title" class="border border-slate-300">
</div>
<div class="flex gap-4">
<label for="author">Author</label>
<input type="text" name="author" id="author" class="border border-slate-300">
</div>
<div class="flex gap-4">
<label for="pages">Total Pages</label>
<input type="number" name="pages" id="pages" class="border border-slate-300">
</div>
<div class="flex gap-4">
<label for="haveread">Read Book?</label>
<input type="checkbox" name="haveread" id="haveread">
</div>
<input type="submit" value="Add Book" id="submitbook" class="mr-8 bg-blue-400 p-2 border border-slate-300 rounded-xl text-white">
</form>
</dialog>
<script src="js/javascript.js"></script>

16
library-app/js/javascript.js
View file

@ -1,6 +1,7 @@
const myLibrary = [];
const container = document.getElementById("main");
const addBookBtn = document.getElementById("addBook");
const newBookForm = document.querySelector("form");
const dialog = document.querySelector("dialog");
function Book(title, author, pages, read) {
@ -47,8 +48,19 @@ addBookBtn.addEventListener("click", () => {
dialog.showModal()
})
console.log(myLibrary)
newBookForm.addEventListener("submit", (e)=> {
e.preventDefault()
const inputs = [...newBookForm.elements]
inputs.forEach((item) => {
console.log(item.value)
})
})
addBookToLibrary("Test Book", "Kyle", "300", true)
console.log(myLibrary)
addBookToLibrary("How the Grinch Stole Christmas", "Dr. Seuss", "12", false)
// console.log(myLibrary)
myLibrary.forEach((book) => createCard(book))