LIVE DEMO :- Cryptocurrency Tracker
In this assignment let's build a Cryptocurrency Tracker
** -- https://assets.ccbp.in/frontend/content/react-js/cryptocurrency-tracker-output.gif -- **
- Extra Small (Size < 576px) and Small (Size >= 576px) - Success
- Extra Small (Size < 576px) and Small (Size >= 576px) - Loading
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Success
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Loading
- Download dependencies by running
npm install
- Start up the app using
npm start
The app must have the following functionalities
-
When the page is opened,
- loader should be displayed
- Make HTTP GET request to the following URL
https://apis.ccbp.in/crypto-currency-converter
- After fetching the data, the updated list of different cryptocurrencies should be displayed
-
The fetched data contains a list of cryptocurrency objects.
-
Each cryptocurrency object will have the following properties.
Key Data Type id String currency_logo String currency_name String usd_value Number euro_value Number -
The
CryptocurrencyItem
component should receive the following keys in cryptoCurrencyData prop.Key Data Type id String currencyLogoUrl String currencyName String usdValue Number euroValue Number -
The modified list of cryptocurrency items is passed to the
CryptocurrenciesList
component as a cryptoCurrenciesData prop in the form of an array object. -
The
CryptocurrenciesList
component should render cryptocurrency items as a list. -
The value of the key id should be used as a key to the
CryptocurrencyItem
. -
Your task is to complete the implementation of
src/components/CryptocurrencyTracker/index.js
src/components/CryptocurrencyTracker/index.css
src/components/CryptocurrenciesList/index.js
src/components/CryptocurrenciesList/index.css
src/components/CryptocurrencyItem/index.js
src/components/CryptocurrencyItem/index.css
-
To show the animated loader, we need to import the loader component as
import Loader from 'react-loader-spinner
-
In order to form the given animated loader, use Rings for
type
attribute & also use #ffffff forcolor
attribute ofLoader
component<Loader type="Rings" color="#ffffff" height={80} width={80} />
The following HTML attributes are required for the HTML for the tests to pass
- The API response received from the given apiUrl should be converted to camel case
- The value of the key
currencyName
from the converted API response should be used asalt
attribute value to each crypto currency icon.<img ... alt={currencyName}/>
- Wrap the Loader component with an HTML container element and add the
testid
attribute value asloader
to it as shown below<div testid="loader"> <Loader type="Rings" color="#ffffff" height={80} width={80} /> </div>
https://apis.ccbp.in/crypto-currency-converter
- Roboto