karam084/awesome-books-es6

This is web app that allows users to enter information about their favorite books. Data displayed on the UI depends on the local storage. The data entered by the user are stored in local storage and can be removed from localStorage. This is a crud application and it is build with JavaScript, HTML and CSS.

Hi there, 👋 I'm Karam Fouad,

• 🔭 I’m currently a full-time student at Microverse Online School.
• 🌱 I’m currently learning Full-Stack Web Development (Ruby on Rails, JavaScript, and React) and Peer Programming.
• 👯 I’m looking to collaborate on JavaScript, React, and Ruby on Rails Projects.
• 🤔 I’m passionate about programming.
• 💬 Ask me about anything I am happy about that.
• 📫 Let's connect on LinkedIn and on Twitter
• 😄 Pronouns: I am a He/Him
• ⚡ Fact about me: I wrote my first line of code in 2017 and I am working towards getting my first dev job for hard work pays!

awesome-books-es6's Issues

PP CODE REVIEW 24/04

Hi @karam084 👋

Great work so far but there are spaces to improve

• You did a great job on the LUXOR time, it is running
• You may want to add your name to the copyright
• the .vscode you can add to the .gitignore file
• You might want to add an image of your application to the README.md

awesome-books-es6/modules/data.js

Line 1 in 4a356ee

export default [];

Does this have a function?

In the Books module, you declared your methods using a #…the s could be led to syntax error and misunderstanding of your code. I think you can do without them.

awesome-books-es6/modules/Book.js

Line 19 in 4a356ee

#preserveBookData() {

Inside index.html kindly remove lines 73-80 in the index.html

    <script src="./modules/data.js" type="module"></script>
    <script src="./modules/book.js" type="module"></script>
    <script src="./modules/addBooksListener.js" type="module"></script>
    <script src="./modules/addNavListeners.js" type="module"></script>
    <script src="./modules/checkAndDisplayList.js" type="module"></script>
    <script src="./modules/displayAllBooksListener.js" type="module"></script>
    <script src="./modules/domElements.js" type="module"></script>
    <script src="./luxon.js"></script>
    <script src="./index.js" type="module"></script>

awesome-books-es6/modules/displayAllBooksListener.js

Lines 4 to 14 in 4a356ee

	export default () => {
	window.addEventListener('DOMContentLoaded', () => {
	if (localStorage.getItem('books')) {
	new Book().displayAllBooksValues();
	const remBookBtns = document.querySelectorAll('.btn-remove');
	remBookBtns.forEach((btn, i) => {
	btn.dataset.index = i;
	btn.addEventListener('click', (e) => {
	new Book().deleteBookValues(e.target);
	});
	});

Listening for Dom Loading could lead to overload in cases you have multiple listeners for your document. You can use Window.onLoad() to only run only when the DOM loads