Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://mmggyy66.github.io/awesome-books-solo/

"Awesome books" is a simple website that displays a list of books and allows you to add remove books from that list.
https://mmggyy66.github.io/awesome-books-solo/

css eslint javascript

Last synced: 19 days ago
JSON representation

"Awesome books" is a simple website that displays a list of books and allows you to add remove books from that list.

Lists

README 

        
# my-awesome-books-solo



My Microverse my-awesome-books-solo project (Module two)



# 📗 Table of Contents



- [my-awesome-books](#my-awesome-books)

- [📗 Table of Contents](#-table-of-contents)

- [📖 \[🎯 my-awesome-books ](#--my-awesome-books-)

  - [🛠 Built With ](#-built-with-)

    - [Tech Stack ](#tech-stack-)

  - [🚀 Live Demo ](#-live-demo-)

  - [👁 Presentation ](#-presentation-)

- [creating my-awesome-books:](#creating-my-awesome-books)

  - [🛠 Built With ](#-built-with--1)

  - [Deploy my website with github pages":](#deploy-my-website-with-github-pages)

  - [- Loom video link:](#--loom-video-link)

  - [💻 Getting Started ](#-getting-started-)

    - [Prerequisites](#prerequisites)

    - [Prerequisites](#prerequisites-1)

    - [Install](#install)

  - [Requirements](#requirements)

    - [Run tests](#run-tests)

    - [Deployment](#deployment)

  - [👥 Authors ](#-authors-)

  - [🤝 Contributing ](#-contributing-)

  - [👋 Show your support ](#-show-your-support-)

  - [🔭Acknowledgments ](#acknowledgments-)

  - [📝 License ](#-license-)



# 📖 [🎯 my-awesome-books 



> "**Awesome books**" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. You will also use a medium-fidelity wireframe to build the UI.is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. You will also use a medium-fidelity wireframe to build the UI.



## 🛠 Built With 



### Tech Stack 



## 🚀 Live Demo 

[link to my-awesome-books-solo: ](https://mmggyy66.github.io/awesome-books-solo/)



(back to top)



## 👁 Presentation 



- [Loom presentation Link]()



# creating my-awesome-books:



Re-create my Awesome books app following the rules:



    Use ES6 syntax.

    Divide my code into modules. Save each module in a separate file in the modules dir. Import modules in the index.js file. For this exercise

    Keep all funcionalities of the app without errors.

    Refactor my methods and functions to arrow functions.

    Use let and const in a correct way.



## 🛠 Built With 



  Technology

  
    

        
  • HTML
    • 

        
  • CSS (**medium-fidelity** wireframe)
    • 

        
  • Javascript
    • 

        
  • Linters (Lighthouse, Webhint, Stylelint, Eslint)
    • 

        
  • Git/GitHub work-flow 
    • 

      



(back to top)



## Deploy my website with github pages":



# [link to my-awesome-books-solo: ](https://mmggyy66.github.io/awesome-books-solo/)



## - Loom video link:



[Loom walking through for my-awesome-books: ]()



## 💻 Getting Started 



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



### Prerequisites



- IDE to edit and run the code (We use Visual Studio Code 🔥).

- Git to versionning your work.



### Install

- first install package.json and node_modules run: 

npm init -y



- npm install --save-dev hint



- npm install --save-dev [email protected] [email protected] [email protected] [email protected]



- npm install --save-dev stylelint stylelint-scss stylelint-config-standard stylelint-csstree-validator



- npm install --save-dev [email protected] [email protected] [email protected] [email protected]



- npm install --save-dev eslint  eslint-config-airbnb-base  eslint-plugin-import  babel-eslint



## Requirements



- Linters configuration.

- Part 1: Manage books collection (plain JS with objects).

- Part 2: Manage books collection (plain JS with classes) and add basic CSS.

- Part 3: Create a complete website with navigation.



Clone the repository to get start with project, then make sure to install dependencies in the linters file located in the [linter](https://github.com/Bateyjosue/linters-html-css/blob/main/.github/workflows/linters.yml) file



(back to top)



### Run tests



- to test and check the html file/s is error-free run: 

npx hint . 



- to fix errors run:

npx hint . -f



- to test and check the css file/s is error-free run: 

npx stylelint "**/*.{css,scss}"

- to fix errors run:

npx stylelint "**/*.{css,scss}" --fix



- to test and check the js file/s is error-free run: 

npx eslint .



- to fix errors run:

npx eslint . --fix



### Deployment



Check for the tests when you generate a pull request and fix the errors if any.

For stylelint error run:sudo npx stylelint "\*_/_.{css,scss}" --fix and it will the fix style issues automatically.



## 👥 Authors 



👤 **Mohamed Gamil Eldimardash**



- GitHub: [@github](https://github.com/MMGGYY66)

- LinkedIn: [LinkedIn](https://www.linkedin.com/in/mohamed-eldimardash-0023a3b5/)

- Twitter: [twitter](https://twitter.com/MOHAMEDELDIMARd)

- Facebook: [facebook](https://www.facebook.com/MOHAMED.ELDIMARDASH/)



  

  
(back to top)



## 🤝 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!



(back to top)



## 🔭Acknowledgments 



- [Microverse Team](https://www.microverse.org/).



## 📝 License 



This project is [MIT](https://github.com/microverseinc/readme-template/blob/master/MIT.md) licensed.



(back to top)