Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Awesome books: with ES6 #1

Merged
merged 2 commits into from Oct 4, 2022
Merged

Awesome books: with ES6 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a41b487
Update READMEmd
Doheera-kosi Oct 3, 2022
68d7927
Update README.md
Doheera-kosi Oct 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 1 addition & 8 deletions README.md
View file
Open in desktop
@@ -1,6 +1,6 @@
![](https://img.shields.io/badge/Microverse-blueviolet)

# Awesome Books
# Awesome books: with ES6

> Description the project.

Expand Down Expand Up @@ -73,13 +73,6 @@ N/A
- GitHub: [@githubhandle](https://github.com/doheera-kosi)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/evans-kupour-1879421a3/)

👤 **Author2**
## Nejjari Abdelhafid

- GitHub: [@Nejjari001](https://github.com/Nejjari001)
- Twitter: [@AbdoNJ19](https://https://twitter.com/AbdoNJ19)
- LinkedIn: [Abdelhafid Nejjari](https://www.linkedin.com/in/abdelhafid-nejjari/)


## 🤝 Contributing

Expand Down
10 changes: 8 additions & 2 deletions index.js
View file
Open in desktop
@@ -1,4 +1,4 @@
import { pushItems } from './modules/pushItems.js';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Optional]

  • Your page should not reload after adding a book. Kindly fix this issue 😊

import { pushItems, elements } from './modules/pushItems.js';
import { Collection } from './modules/collectionClass.js';
import { } from './modules/time.js';
// Declaring Global Variables
Expand All @@ -19,6 +19,12 @@ window.onload = () => {
collection.getBooks();
};

elements.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
collection.removeBook(e.target.id);
}
});

const addBtn = document.querySelector('.addBtn');

// event Listener to triger add Class
Expand All @@ -32,7 +38,7 @@ navList.addEventListener('click', () => {
sectionList.style.display = 'block';
sectionAdd.style.display = 'none';
sectionContact.style.display = ' none';
pushItems();
pushItems(collection);
});

navAdd.addEventListener('click', () => {
Expand Down
2 changes: 1 addition & 1 deletion modules/collectionClass.js
View file
Open in desktop
Expand Up @@ -44,7 +44,7 @@ export class Collection {
pushItems();
}
}
export const collection = new Collection();
const collection = new Collection();

// window onload function to get array items from the local storage and display them
window.onload = () => {
Expand Down
4 changes: 2 additions & 2 deletions modules/pushItems.js
View file
Open in desktop
Expand Up @@ -7,8 +7,8 @@ export function pushItems() {
booksArray.forEach((item, index) => {
bookHtml += `
<li class='list_item' style="background-color: ${index % 2 && 'rgb(225, 223, 223)'}">
<p class="book-name"> "${item.title}" by ${item.author}</p> <br>
<button type="button" id=${item.id} onclick="collection.removeBook(this.id)">Remove <i class="fas fa-plus-circle"></i></button>
<p class='book-name'> "${item.title}" by ${item.author}</p> <br>
<button type='button' id=${item.id} clas='remove-button'>Remove <i class="fas fa-plus-circle"></i></button>
</li>
`;
});
Expand Down