GithubHelp home page GithubHelp logo

geekelo / awesome-books-webapp Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 1008 KB

A basic website that allows users to add/remove books from a list

JavaScript 96.94% HTML 1.12% CSS 1.93%
javascript front-end-development completed-project

awesome-books-webapp's Introduction

signature

๐Ÿ“— Table of Contents

๐Ÿ“– Awesome Books WebApp

The Awesome Books WebApp is a user-friendly platform designed to help users keep track of their personal book collection. The website allows users to add and delete books from their record, making it convenient to manage their reading materials.

Users can easily add books to their collection by providing the book's title and author information. The website stores this data and displays it in an organized manner, making it easy for users to browse through their book records. Each book entry includes details such as the title and author, providing users with a comprehensive overview of their collection.

In addition to adding books, users can also remove books from their record when they no longer wish to track them. The website offers a simple deletion process, ensuring that users can effortlessly manage their collection over time.

The Awesome Books WebApp prioritizes user experience and provides a clean and intuitive interface. It offers a seamless process for adding and deleting books, empowering users to maintain an up-to-date and personalized record of their reading materials.

With the Awesome Books WebApp, users can effortlessly organize and track their book collection, ensuring they never lose sight of their favorite reads and enabling them to stay engaged with their literary adventures.

Head to the LIVE DEMO SECTION for Live links and presentations

๐Ÿ›  Built With

Tech Stack

ES6
HTML
CSS
JavaScript

Key Features

  • Mobile Friendly : this website performs well on a mobile device like a phone or tablet.
  • Desktop Friendly: this website is responsive to desktop screen sizes.
  • Simple and Attractive Design : the UI / UX is engaging and appealing.
  • Functional : this website is accessible, easy to navigate, and helpful for users.
  • **Animations and transitions : This website has engaging transitions and animations that makes it easier to use, smoother and more natural.

(back to top)

๐Ÿš€ Live Demo

View the live demo of this project by clicking the text below.

(back to top)

๐Ÿ’ป Getting Started

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

Clone the repository

git clone https://github.com/geekelo/awesome-books-webapp.git

And you are ready to begin your project

Setup

This project contains An HTML FILE (free to edit) - file that contains html codes to give structure to the main webpage A CSS FILE (free to edit) - file that contains css codes to style the webpage A GIT IGNORE FILE (free to edit) - to hide personal or private files HTML/CSS LINTER FILES (should not edit) - Do not make changes A JAVASCRIPT FILE (free to edit) - that handles functionalities and dynamic HTML

Prerequisites

You should have Node and Git Installed You should have basic knowledge on HTML / CSS / JavaScript You should have a code editor

Install

Download install VSCODE and Git To install linters, execute the following commands:

Initialize npm | ``` npminit -y ```
HTML | ``` npm install --save-dev [email protected] ```
CSS | ```npm install --save-dev [email protected] [email protected] [email protected] [email protected]  ```

Usage

To run the linters, execute the following command and fix linter errors:

HTML | ``` npx hint . ```
CSS | ```npx stylelint "**/*.{css,scss}" ```
If you get a flood of errors keep in mind that linters guide you in writing a clean code!

Run Tests

You can run this program on your browser

Deployment

You can deploy this project using the following procedure:

  • Pick the right hosting provider.
  • Choose the tool and method to upload your website.
  • Upload files to your website.
  • Move the website files to the main root folder.
  • Import your database.
  • Check if your website works worldwide.

(back to top)

๐Ÿ‘ฅ Authors

(back to top)

๐Ÿ‘ค Eloghene Otiede

(back to top)

๐Ÿค Contributing

You can offer Contributions, submit an issue, and make a feature request.

Future Features

  • Add pop up modals
  • Add the contact form
  • Add more content pages

โญ๏ธ Show your support

Please give a โญ๏ธ to support this project

(back to top)

๐Ÿ™ Acknowledgments

Fonts: Google Fonts

(back to top)

๐Ÿ“ License

This project is MIT licensed.

(back to top)

awesome-books-webapp's People

Contributors

geekelo avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

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.