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

35
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> <button class="mr-8 bg-blue-400 p-2 border border-slate-300 rounded-xl text-white" id="addBook">Add Book</button>
</div> </div>
<div class="container grid grid-cols-3 gap-4 mx-auto p-6" id="main"> <div class="container grid grid-cols-3 gap-4 mx-auto p-6" id="main"></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="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> <dialog class="w-3/5 p-2 border border-slate-300 rounded-xl">
<form class="flex flex-col min-w-full gap-4">
<dialog> <div class="flex gap-4">
<form>
<label for="title">Book Title</label> <label for="title">Book Title</label>
<input type="text" name="title" id="title"> <input type="text" name="title" id="title" class="border border-slate-300">
</div>
<div class="flex gap-4">
<label for="author">Author</label> <label for="author">Author</label>
<input type="text" name="author" id="author"> <input type="text" name="author" id="author" class="border border-slate-300">
</div>
<div class="flex gap-4">
<label for="pages">Total Pages</label> <label for="pages">Total Pages</label>
<input type="number" name="pages" id="pages"> <input type="number" name="pages" id="pages" class="border border-slate-300">
</div>
<div class="flex gap-4">
<label for="haveread">Read Book?</label> <label for="haveread">Read Book?</label>
<input type="checkbox" name="haveread" id="haveread"> <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> </form>
</dialog> </dialog>
<script src="js/javascript.js"></script> <script src="js/javascript.js"></script>

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

@ -1,6 +1,7 @@
const myLibrary = []; const myLibrary = [];
const container = document.getElementById("main"); const container = document.getElementById("main");
const addBookBtn = document.getElementById("addBook"); const addBookBtn = document.getElementById("addBook");
const newBookForm = document.querySelector("form");
const dialog = document.querySelector("dialog"); const dialog = document.querySelector("dialog");
function Book(title, author, pages, read) { function Book(title, author, pages, read) {
@ -47,8 +48,19 @@ addBookBtn.addEventListener("click", () => {
dialog.showModal() 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) 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)) myLibrary.forEach((book) => createCard(book))