Awesome Books Project

This is an e-library project, based primarily on js which implements features as; storage of books, adding of books and removal of books. It implements various js methods and API's.

This is a PWA (Progressive Web Application) built with JavaScript and bundled with webpack, it utilizes the luxon library to display the local date & time,

Built With

• HTML

  • ul Unordered List (To list out certain items on the page)
  • HTML form
  • input attributes; placeholder

• Java Script

• Implemented DOM manipulation in various parts of the project to make page dynamic.

• JS Objects, Arrays, & Object Arrays to store data of similar items.

• Implement the use of Arrow Functions => and {destructure} methods to match the modern concentions.

• Made use of various JS objects and methods such as; node.createElement(), node.AppendChild(), node.replaceChild(), etc. to avoid the use of innerHTML for security considerations.

• Implemented array.forEach(), through the course of the project to loop through objects in the Objects Array; thus making it possible to manipulate the objects and produce desired result.

• Made use of if Statements to match specific use cases.

• Implement the use of eventListeners to make 'add' & 'remove' buttons functional.

• Implement the use of array.find() & parseInt to locate the specific books to remove when the appropriate button is clicked.

• The JSON API stringify & parse was implemented, to enable JS Objects to be used on windows local storage.

• The node.localStorage set() & get() methods were used to store and retrieve user inouts.

• Made use of the HTMLCollection API with DOM selector document.querySelectorAll() to manipulate a list of elements with same class.

• Implement JS - Class with static methids.

• Luxon

• The Date & Time displayed in the page is gotten from the Luxon library

• WEBPACK

• Implement webpack with various plugins to bundle js, minify css, and create a HTMl template.

• Split webpack config into two modes production and development.

• Create a common webpack config and use a webpack-merge plugin to keep things DRY in production and development configs.

• Load DateTime from luxon library.

• The Google workbox plugin is used to precache application shell to make it work offline

• Various webpack plugins were used for this project.

  • HTMLWebpackPlugin
  • MiniCssExtractPlugin
  • OptimizeCSSAssetsPlugin
  • CssMinimizerPlugin
  • CleanWebpackPlugin
  • WorkboxWebpackPlugin
  • CopyPlugin
  • TerserPlugin to minimze bundle size

• Service Worker

• Workbox Plugin is used to precache necessary URLS to enable site to work offline, so as to make it a fully Progressive Web App

• JEST

• Unit tests and integrated automated tests are wriiten for the functions and classes using jest

• Mock localStorage API

• CSS

  • Pseudo-selectors (hover; to add hover effect to certain elements)
  • Pseudo-elements
  • CSS position property
  • CSS media query to make page responsive for mobile
  • Flexbox
  • Transition property
  • CSS background property
  • CSS animation
  • Box-Shadow & Text-Shadow Properties.

Live Demo

Live Demo Link

Development (Running locally)

• Clone the project

git clone https://github.com/Lanr3waju/portfolio-project.git

• Install Dependencies

npm install

To run StyleLint by itself, you may run the lint task:

npm run lint:check

Or to automatically fix issues found (where possible):

npm run lint

You can also check against Prettier:

npm run format:check

and to have it actually fix (to the best of its ability) any format issues, run:

npm run format

You can also check against HTML Validator:

npm run html-validator

Style Guides

• CSS Style Guide
• HTML Style Guide
• JavaScript Style Guide
• Git Style Guide

👤 Author

• Github: [@Lanr3waju]https://github.com/Lanr3waju)
• LinkedIn: @Abass Olanrewaju
• Twitter: @abdul-wasi-img

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• I appreciate the efforts of my mentors for their constatnt guidance and contribtution.
• @bolah2009
• @adejam

📝 License

MIT licensed.