https://github.com/powerlevel9000/carbon-cell-takeaway
It is a home takeaway project for the carbon cell with bellow requirements
https://github.com/powerlevel9000/carbon-cell-takeaway
chartjs hooks react
Last synced: about 2 months ago
JSON representation
It is a home takeaway project for the carbon cell with bellow requirements
- Host: GitHub
- URL: https://github.com/powerlevel9000/carbon-cell-takeaway
- Owner: PowerLevel9000
- Created: 2024-04-01T07:37:55.000Z (about 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-04-01T08:46:02.000Z (about 2 years ago)
- Last Synced: 2025-04-07T14:49:10.210Z (about 1 year ago)
- Topics: chartjs, hooks, react
- Language: JavaScript
- Homepage: https://carbon-cell-takeaway.onrender.com/
- Size: 199 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Carbon_Cell_Takeaway
It is a home takeaway project for the carbon cell with bellow requirements
[](https://carbon-cell-takeaway.onrender.com/)
## Task 1: Create a Side Navigation Bar
- Objective: Implement a side navigation bar similar to the one highlighted in the provided image.
- Requirements:
- [ ] The navigation bar should be responsive and collapse into a hamburger menu on smaller screens.
- [ ] Include at least three navigation items.
- [ ] Highlight the active navigation item.
- Evaluation Criteria:
- [ ] Correct implementation of the navigation bar layout.
- [ ] Responsiveness on different screen sizes.
- [ ] Proper highlighting of active navigation items.
## Task 2: Graph Population Data
- Objective: Fetch population data from the provided API (https://datausa.io/api/data?drilldowns=Nation&measures=Population) and create a graph.
- Requirements:
- [ ] Utilize React JS and any relevant libraries (e.g., Chart.js) to create the graph.
- [ ] Display the population data for different nations.
Provide appropriate labels, legends, and axis titles for the graph.
- Evaluation Criteria:
- [ ] Successful retrieval and display of population data.
- [ ] Accuracy and clarity of the graph representation.
- [ ] Proper labeling and styling of the graph components.
## Task 3: Display Cryptocurrency Prices
- Objective: Fetch cryptocurrency prices from the provided API (https://api.coindesk.com/v1/bpi/currentprice.json) and display them in cards.
- Requirements:
- [ ] Fetch data asynchronously using React's lifecycle methods or hooks.
- [ ] Display prices of Bitcoin in multiple currencies (e.g., USD and Euro).
- [ ] Design visually appealing cards to showcase the cryptocurrency prices.
- Evaluation Criteria:
- [ ] Proper integration and retrieval of cryptocurrency prices.
- [ ] Clear presentation of prices in the card format.
- [ ] Visual appeal and consistency in card design.