Giter VIP home page Giter VIP logo

jscapstone's Introduction


๐Ÿ“— Table of Contents

๐Ÿ“– [Capstone module 5 JS]

[Capstone module 5 Js] is a final project where we show what we have learnt during the last 4 weeks about JS, webpack, ES6, Asyncronuos and APIS

here we are using an external API to save some data from our app

๐Ÿ›  Built With

Tech Stack

Front End

Key Features

  • [It uses API methods to work]
  • [it uses asyncrouns code]
  • [Live demo]

(back to top)

๐Ÿš€ Live Demo

๐Ÿš€ Video explaining the project

(back to top)

๐Ÿ’ป Getting Started

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

https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository

Prerequisites

In order to run this project you need:

Clone the repo run - npm i run - npm run dev run - npm run start

a new tab will be open in your browser with the project ready

Setup

Clone this repository to your desired folder:

https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository

Install

Install this project with:

run - npm install

Usage

To run the project, execute the following command:

Download or clone the repo and double click on the index.html file If you want to modify something you can open the folder with your favorite text editor I recomend Visual studio code

run - npm run dev run - npm run start

Run tests

To run tests, run the following command:

run this command: npm run test

Deployment

You can deploy this project using:

run this command: npm run deploy

the project will be automatically deployed on github pages, on your github account. for you to do that, you need a github account and you need a copy of this repo on your github account

(back to top)

๐Ÿ‘ฅ Authors

๐Ÿ‘ค Mariano Benjamin

๐Ÿ‘ค Gerson Higgins

-GitHub: @githubhandle

(back to top)

๐Ÿ”ญ Future Features

  • [It will have a better interface]
  • [It will hace more pictures from the API]
  • [It will improve the test and we will add more tests]

(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 like and subscribe

(back to top)

๐Ÿ™ Acknowledgments

I would like to thank to Microverse for this coding experience

(back to top)

๐Ÿ“ License MIT

This project is MIT licensed.

(back to top)

jscapstone's People

Contributors

benja27 avatar gersonhiggins avatar

Watchers

 avatar

jscapstone's Issues

[3pt] - Add all items counter on the Homepage - Benja

Even if the API gives you the number of items, you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Homepage.

Respect the following rules:

Each counter should be implemented as a separate module.
A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
A counter function should cover all the edge cases you can think about.

[4pt] - Create feature: add new reservation - Gerson

Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

123558708-00010600-d798-11eb-9dda-8d116f0e6a5c

When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated

[4pt] - Create feature: add new comment - Gerson

Implement the "add new comment" form on the Comments pop up according to the wireframe:

123558625-98e35180-d797-11eb-9607-8f294273ca01

When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

[4pt] - Display Reservations pop up with selected item's details - Gersonj

Create a reservations popup only with the top section (displaying details of the selected item)
123558062-a21eef00-d794-11eb-83c4-f5cbdc83421e
When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

[4pt] -Display Comments pop up with selected item's details - Gerson

Create a comments popup only with the top section (displaying details of the selected item)

123558062-a21eef00-d794-11eb-83c4-f5cbdc83421e

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

[0.5pt] Find external API - group task

Find an API to base the development of the webapp around it. The API should allow you to

Get a list of items with a unique item id (or generate the unique id).
For a given item, get detailed information about it.
choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.

[4pt] - Display list of items on the Homepage - Benja

Create the main part of the homepage that keeps the layout from the wireframe:

123557585-f1afeb80-d791-11eb-96ae-17be082e9359

When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

This task does not include displaying the number of likes for each item.

This task does not include the counter of the items.

[4pt] - Display number of likes for each item on the Homepage - Benja

When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

Remember that your page should make only 2 requests:

one to the base API
and one to the Involvement API.
This task does not include displaying the likes button (heart icon on the wireframe) for each item.

[3pt] - Add comments counter - Gerson

Even if the API gives you the number of comments you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Comments pop up.

Respect the following rules:

Each counter should be implemented as a separate module.
A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
A counter function should cover all the edge cases you can think about.

[3pt] - Add reservations counter - Benja

Even if the API gives you the number of reservations you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Reservations pop up.

Respect the following rules:

Each counter should be implemented as a separate module.
A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
A counter function should cover all the edge cases you can think about.

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.