Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://rhk-microverse.github.io/book-awesome-module/

This is a Single Page Application written in HTML, CSS, and JavaScript.
https://rhk-microverse.github.io/book-awesome-module/

css html javascript

Last synced: 15 days ago
JSON representation

This is a Single Page Application written in HTML, CSS, and JavaScript.

Awesome Lists containing this project

README

        

logo


Conference Project


Capstone Project Module-1

# 📗 Table of Contents

- [📖 About the Project](#about-project)
- [🛠 Walk through](#walk-through)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [📝 License](#license)

# 📖 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.

### How to build the "Awesome books" website
- 1: Manage books collection (plain JS with objects).
- 2: Manage books collection (plain JS with classes) and add basic CSS.
- 3: Create a complete website with navigation.

Will start by building the core functionalities and ignoring how the website looks. At the very beginning the website will look similar to the UI below. Note that it is plain HTML with no styling, but it will allow to add and remove books from the list!


Basic UI

Once have the code working, will play with refactoring it. In this step will also need to adhere to the layout presented in the wireframe, but i will choose the application's styling. So i initial ugly HTML will turn into something similar to this:


Core elements

In the last step, will build a complete website with working navigation. When a user clicks on a link in the navigation bar, the content in the main section of the website changes (URL stays the same, though.) Again styling is my choice, but it is essential to adhere to the layout presented in the wireframe. my end result should look similar to this:


Full website

**Conference** is an Html,CSS&JavaScript-based project with the implementation of modules for JavaScript

# Responsive website for communities events and particpants details
This project is about creating a responsive website to showcase community event, activities and agenda. This is a implementation of SINGLE PAGE APPLICATION widely known as SPA.

Awesome Books: mobile-first approach & responsive on desktop version and bigger size is the first capstone project in the process of experiences mimic real-world projects where we must apply what we learned throughout the entire Module, and are built with business specifications that will look really nice in our portfolio. This is a Single Page Application project where in a single page all elements are called through JavaScript Dynamic programming.

## 🛠 Walk through


  • See the Project Requirement

  • If required you should personalize the content of your page. Choose a topic that is different than the one in the original design
  • ## 🛠 Built With

    ### Tech Stack

    Client Side / Front-End

    Server Side / Back-End

    ### Tools i have used for this project

    Code Convention, Code Analysis




    Version Control, CI/CD, Hosting Service



    IDE, Desktop Apps, Other Tools

    ### Key Features

    - Mobile First Approach
    - Responsive Website
    - Button Interactions (i.e. hover, etc.)
    - Attractive Images & Design
    - Modal/dialog
    - Dynamic page (data is retrieved from JSON file)

    (back to top)

    ## 🚀 Live Demo
    [Live Demo Link](https://rhk-microverse.github.io/book-awesome-module/)

    ## 💻 Getting Started
    ### Hi, there, I'm Rassel - aka [Full Stack Developer] [Check my portfolio](https://rhk-microverse.github.io/My-Portfolio/)

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

    ### Prerequisites

    In order to run this project you need:
    - git version 2.38.x
    - node.js version > 12.x
    - IDE
    - browser (chrome, firefox, edge, safari)

    ### Setup

    Clone this repository to your desired folder:

    ```sh
    cd my-folder
    git [email protected]:RHK-MICROVERSE/kook-awesome-module.git
    ```

    ### Install

    Install this project with:

    ```sh
    cd my-project
    node install
    ```

    ### Usage

    To run the project, execute the following command:
    run live server

    ### Run tests

    To run tests, run the following command:
    Run Github Actions Test
    ```sh
    npx stylelint "**/*.{css,scss}"
    ```

    ### Deployment

    This project is deployed at github pages you can clone it here. [Please click to clone](https://github.com/RHK-MICROVERSE/book-awesome-module)

    (back to top)

    ## 👥 Authors
    - Main Author: **Rassel Hassan Kadir**
    > List of the collaborators of this project.
    [Joseph Ddiiro](https://github.com/Ddiiro)

    👤 **Rassel Hassan Kadir**

    - GitHub: [@githubhandle](https://github.com/RHK-MICROVERSE)
    - Twitter: [@twitterhandle](https://twitter.com/rhk_trading)
    - Linkedin: [@linkedinhandle](https://www.linkedin.com/public-profile/settings?trk=d_flagship3_profile_self_view_public_profile)
    - Email: [email protected]

    (back to top)

    ## 🔭 Future Features

    - [ ] **Dynamic content.**
    - [ ] **Add functionality of Javascript**
    - [ ] **Will add some background **

    ## 🤝 Contributing

    Contributions, issues, and feature requests are welcome!

    Feel free to check the [issues page](https://github.com/RHK-MICROVERSE/book-awesome-module/issues).

    (back to top)

    ## ⭐️ Show your support

    If you like this project give a star to this repositiory.

    (back to top)

    ## 🙏 Acknowledgments

    I would like to thank the Microverse full-stack curriculum for the inspiration and guidance. Original design idea by Cindy Shin in Behance

    (back to top)

    ## ❓ FAQ

    - **Is it allowed to copy the contents of this project and use it for personal use?**

    - Yes, this project is free for copying and reusing in any way you like.

    - How often will the future features will be implemented?

    - As this is personal porfolio, the owner will update this projects pages more frequently with every enhancements in personal status.

    ## 📝 License

    This project is under [MIT](./LICENSE) licensed.

    (back to top)