08 - 02 - Currency Converter

[aksnell]

In this assignment, you will create a React application that will convert various currencies.

For the data, you will use the API available here

Objectives

• Work with an API to display data
• Work with React
• Work with the React lifecycle (componentDidMount with classes or useEffect with hooks)

Requirements

• Use this API documentation to build a page that allows for conversion between multiple currencies

Explorer Mode

• [x] Create a page that loads and shows the current currency conversion rates.
• [x] Design the page yourself or use utility CSS libraries like: Bootstrap or Bulma or Tailwind
• [x] Use USD as the base currency.
• [x] Allow the user to enter a currency amount (allow for decimal amounts like 42.12) in USD.
• [x] Show the converted amount in each of the available currencies.
  • [x] Either update as the user types or include a button that performs the conversion when clicked.

Adventure Mode

• [ ] Allow the user to choose a new base currency other than USD.
• [ ] Allow the user to use a specific day in the past.
  • HINT
  • Fetch the conversion rates for that day.
  • Show the updated conversion rates and converted amount.

Epic Mode

• [ ] Use react router to allow the user to specify the base currency in the URL

[aksnell]

https://github.com/aksnell/currency-converter https://currency-converter-theor.netlify.app/

[gstark]

I don't think state is needed here, you never updated it so just using the passed props would be sufficient: https://github.com/aksnell/currency-converter/blob/master/src/components/ConversionRow.jsx#L5-L12

This should have a key property so that React can properly identify the iterated/generated entries: https://github.com/aksnell/currency-converter/blob/master/src/components/ConversionTable.jsx#L35, likely the symbol is a good key candidate.

[aksnell]

Your homework 08 - 02 - Currency Converter was marked: Meets Expectations

“Well done!”