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

working on form adding book

Browse source
This commit is contained in:
kyle 2025-01-05 09:36:53 -05:00
parent b858ebc4a2
commit 569d99e947
2 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
library-app/index.html
View file

@ -31,7 +31,7 @@
</div> </div>
<div class="flex gap-4"> <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" value="haveread">
</div> </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"> <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>

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

@ -20,11 +20,12 @@ function addBookToLibrary(title,author,pages,read) {
} }
function createCard (book){ function createCard (book, index){
const card = document.createElement("div"); const card = document.createElement("div");
const classList = ["p-6", "border", "border-slate-300", const classList = ["p-6", "border", "border-slate-300",
"bg-white", "rounded-xl", "shadow-xl", "flex", "flex-col", "gap-x-4"]; "bg-white", "rounded-xl", "shadow-xl", "flex", "flex-col", "gap-x-4"];
card.classList.add(...classList); card.classList.add(...classList);
card.dataset.index = index
Object.keys(book).forEach((element) => { Object.keys(book).forEach((element) => {
@ -45,22 +46,38 @@ function createCard (book){
} }
addBookBtn.addEventListener("click", () => { addBookBtn.addEventListener("click", () => {
dialog.showModal() dialog.showModal();
}) })
newBookForm.addEventListener("submit", (e)=> { newBookForm.addEventListener("submit", (e)=> {
e.preventDefault() e.preventDefault();
const inputs = [...newBookForm.elements] const inputs = [...newBookForm.elements];
let book = [];
inputs.forEach((item) => { inputs.forEach((item) => {
console.log(item.value) book.push(item.value);
// console.log(item.value);
// console.log(item.type);
}) })
addBookToLibrary(book)
clearForm();
dialog.close();
}) })
function clearForm() {
const inputs = [...newBookForm.elements];
inputs.forEach((item) => {
if(item.type == 'submit') return;
item.value = ""
})
}
addBookToLibrary("Test Book", "Kyle", "300", true) addBookToLibrary("Test Book", "Kyle", "300", true)
addBookToLibrary("How the Grinch Stole Christmas", "Dr. Seuss", "12", false) addBookToLibrary("How the Grinch Stole Christmas", "Dr. Seuss", "12", false)
// console.log(myLibrary) // console.log(myLibrary)
myLibrary.forEach((book) => createCard(book)) myLibrary.forEach((book, index) => createCard(book, index))