In this library app I’ve added trash bins on each card at the bottom right of each box. I would like to add the functionality to actually delete each card (grid item) by clicking on its corresponding trash bin.
I’m new to javascript and I don’t know how to do this yet
It says it needs more details but I don’t know what to add besides this so I’ll just leave this note here and see if it accepts it this time.
const myLibrary = [
{ title: 'A storm of Swords', author: 'George R. R. Martin', numOfPages: '1008 pages', hasRead: true ? 'Read.' : "Hasn't been read yet" },
{ title: 'A Game of Thrones', author: 'George R. R. Martin', numOfPages: '720 pages', hasRead: false ? 'Read.' : "Hasn't been read yet" },
{ title: "The Hobbit", author: "J.R.R. Tolkien", numOfPages: "295 pages", hasRead: true ? "Read." : "Hasn't been read yet." }
];
function Book(title, author, numOfPages, hasRead) {
this.title = title;
this.author = author;
this.numOfPages = numOfPages;
this.hasRead = hasRead;
this.info = function() {
return `${title} by ${author}, ${numOfPages}, ${hasRead}`;
}
}
const deleteCard = document.querySelector('.grid-item svg');
console.log(myLibrary[0]);
function addBook() {
const fTitle = document.getElementById("bookTitle").value;
const fAuthor = document.getElementById("author").value;
const fNumOfPages = document.getElementById("numOfPages").value;
const fHasRead = document.getElementById("hasRead").checked ? "Read." : "Hasn't been read yet.";
if (fTitle && fAuthor && fNumOfPages) {
const newBook = new Book(fTitle, fAuthor, fNumOfPages, fHasRead);
addBookToLibrary(newBook);
const gridItem = document.createElement("div");
gridItem.className = "grid-item";
// Add content to the grid item
gridItem.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="54px" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffffff}</style><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
<h3>${newBook.title}</h3>
<p>${newBook.author}</p>
<p>${newBook.numOfPages}</p>
<p>${newBook.hasRead}</p>
`;
gridContainer.appendChild(gridItem);
}
}
function addBookToLibrary(book) {
myLibrary.push(book);
}
/////////////////////////
const modal = document.querySelector('.modal');
const openModal = document.querySelector('.open-button');
const closeModal = document.querySelector('.close-btn');
openModal.addEventListener('click', () => {
modal.showModal();
});
closeModal.addEventListener('click', () => {
modal.close();
})
/////////////////////////
const gridContainer = document.getElementById("gridContainer");
function updateGrid() {
myLibrary.forEach(item => {
// Create a div for each grid item
const gridItem = document.createElement("div");
gridItem.className = "grid-item";
// Add content to the grid item
gridItem.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
<h3>${item.title}</h3>
<p>${item.author}</p>
<p>${item.numOfPages}</p>
<p>${item.hasRead}</p>
`;
// Append the grid item to the container
gridContainer.appendChild(gridItem);
})};
updateGrid();* {
box-sizing: border-box;
}
dialog::backdrop {
background: rgb(0 0 0 / .4);
}
.modal {
padding: 1.5em;
max-width: 50ch;
}
dialog {
border: 2px solid black;
border-radius: 12px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
}
body {
background-color: rgb(215, 137, 28);
}
dialog label {
font-size: 18px;
display: block;
padding: 8px 0 8px;
}
dialog input[type=checkbox] {
display: block;
margin: 0 0 16px;
}
dialog input[type=text],
dialog input[type=number] {
width: 100%;
}
dialog h2 {
margin: 0 0 10px;
}
dialog text {
width: 100%;
}
.close-button {
margin-bottom: 10px;
}
h2 {
padding-right: 22px;
}
/* input:invalid {
outline: 2px solid red;
}
input:valid {
border: 2px solid black;
} */
/* -------------------- */
/* --------GRID-------- */
/* -------------------- */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
}
.grid-item {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
text-align: center;
background-color: #f9f9f9;
position: relative;
}
.grid-item h3 {
margin: 0 0 8px;
}
.grid-item p {
margin: 0;
color: #666;
}
.fa-trash {
position: absolute;
z-index: 101;
}
.grid-container .grid-item {
position: relative;
}
.grid-item svg {
height: 20px;
width: 20px;
position: absolute;
right: 15px;
bottom: 15px;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e8fb2c6b62.js" crossorigin="anonymous"></script>
</head>
<body>
<h2>An interesting title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet maiores placeat dolorum corporis nihil sapiente cupiditate animi rem ab tenetur facilis ad hic corrupti eligendi, nulla labore, impedit eveniet repudiandae!</p>
<button class="button open-button">open modal</button>
<dialog class="modal" id="modal">
<h2>Enter details</h2>
<form class="form" method="dialog">
<label>Book Title </label>
<input type="text" id="bookTitle" required />
<label>Author </label>
<input id="author" type="text" id="author" required />
<label>Number of pages </label>
<input type="number" id="numOfPages" required />
<label>Click if you've finished reading it</label>
<input type="checkbox" id="hasRead" />
<input id="addBookBtn" type="submit" onclick="addBook()" />
</form>
<button class="close-btn" id="closeDialog">×</button>
</dialog>
<div class="grid-container" id="gridContainer">
</div>
<script src="index.js"></script>
</body>
</html>