Giter Site home page Giter Site logo

cancelei / awesome-books Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 1.95 MB

Main learning points: Use Javascript to add, remove and display books as objects in the Bookshelf (list of books). Made during Microverse Coding School.

Home Page: https://cancelei.github.io/Awesome-books/

JavaScript 95.23% HTML 3.83% CSS 0.94%
website

awesome-books's Introduction

HTML, CSS and JavaScript Book List Storage Website

πŸ“— Table of Contents

[HTML, CSS and JavaScript Capstone] is an HTML, CSS and JavaScript prject to showcase my HTML, CSS, JavaScript and GitHub Knowledge

πŸ›  Built With

1-HTML. 2-CSS. 3-JavaScript (5 & 6). 3-LINTERS.

Tech Stack

HTML
CSS
JavaScript
Visual Code IDE / WebStorm IDE

Key Features

  • JS with import/export and a Modules folder (modular architecture).
  • A main class and its corresponding methods, and other functions to make the APP work.
  • Reworked CSS Styling, UI improvements and UX (after inserting a book, it will move the user to the book list)

(back to top)

To get a local copy up and running, follow these steps.

Prerequisites

1- Web browser 2- Code editor 3- Version Control System (git)

Setup

Clone this repository to your desired folder:

Run this commands:

cd my-folder
git clone https://github.com/cancelei/Awesome-books.git

Install

Install this project with:

Run this command:

  cd Awesome-books
  npm install

Usage

To run the project, execute the following command:

launch index.html using live server or live preview

(back to top)

Deployment

You can deploy this project using: Github Pages.

GitHub Pages allows you to host static websites directly from your GitHub repository.

To deploy this project using GitHub Pages, follow these steps:

Ensure that your project has a docs folder at the root directory. If it doesn't exist, create one and place all the necessary static files (HTML, CSS, JavaScript, etc.) inside this folder.

Push your code to a branch (e.g., main or master) in your GitHub repository.

Go to your GitHub repository's settings.

Scroll down to the GitHub Pages section.

In the "Source" drop-down menu, select the branch you want to deploy (e.g., main).

Select the /docs folder as the source.

Click on the "Save" or "Apply" button to save the changes.

GitHub Pages will build and deploy your project. Once the deployment process is completed, you will see a green success message along with the URL where your project is hosted.

Visit the provided URL to view your deployed project.

Please note that it may take a few moments for GitHub Pages to build and deploy your project. Additionally, ensure that your project is set up correctly with the necessary HTML, CSS, and JavaScript files in the docs folder for it to be deployed successfully.

(back to top)

πŸ‘₯ Authors

πŸ‘€ Muhammad Aminu Salihu

πŸ‘€ Glauber Bannwart

(back to top)

πŸ”­ Future Features

  • More Features, User Login, User Data Storage, Layout improvement.

(back to top)

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project Please Rate IT!

(back to top)

πŸ™ Acknowledgments

I would like to acknowledge Mosh Hamedani for his great course on JavaScript.

(back to top)

πŸ“ License

This project is MIT licensed.

(back to top)

awesome-books's People

Contributors

cancelei avatar mohashyne avatar

Stargazers

Andrea Manuel avatar Ricardo Martínez avatar Borna Šoőtarić avatar

Watchers

 avatar

awesome-books's Issues

Peer to Peer Jun 9th, 2023

Congratulation! Your project looks really good, but there is a small styling detail I would suggest you implement.
Kindly consider adding some margin, padding or space-between the start of the container and the title and end of the container, and the remove button.
Screenshot 2023-06-09 8 28 00 AM

Peer-to-peer code review

  • Local storage is not working
  • make the value of the Booktitle and book author pushed to thee array β€œbookCollection”

Peer to Peer - Week 2 - Day 4

great job gif

you're doing a great job!

[SUGESTION]

  • separate with comments your javascript codebase and functions to make your code clearer, it can help you find easily code lines.

Morning session feedback on awesome books project

Hi @cancelei
Alt Text

Highlights

  • Nice overall layout.
  • Good code structure.

Suggestions βœ…

  • Hey there, I just wanted to share a friendly suggestion: for more clear sturcture you can separate your class and methods and export and import into your script.
  • Some part of your script is not working specially event listner on navigation, please work on solve the problem. Keep up the fantastic work!

Important Notes πŸ“

  • Feel free to leave any questions in slack or in comments above this issue
  • Please, remember to tag us in your questions so we can help with this

Note: Keep up the good work βœ….

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.