A currency converter that displayed multiple currencies on one page. Each currency has a seperated number input. When user enter a new value into an input, it would be converted to all other selected currencies.
The web app is deployed to Netlify:
https://that-currency-converter.netlify.app/
- Enter a new value into any input, it will be converted to all other currencies
- Update currency by searching/selecting on the dropdown menu, the corresponding value will be updated according to the exchange rate of the newly selected currency
- Add currency (max: 10) by click "Add Currency"
- Remove currency (min: 2) by clicking on the cross at the end of the currency
- Clone or download this repository onto your local device.
cd
to the folder where this project is cloned.- Install all dependencies with
npm install
command. - Run the app in the development mode with
npm start
command. - Open the broswer and visit: http://localhost:3000/.
📦currency-converter ┣ 📂docs ┣ 📂public ┣ 📂src ┃ ┣ 📂Components ┃ ┃ ┣ 📂CurrencyList ┃ ┃ ┃ ┣ 📂Control ┃ ┃ ┃ ┃ ┣ 📜AddCurrencyButton.jsx ┃ ┃ ┃ ┃ ┣ 📜ErrorMessage.jsx ┃ ┃ ┃ ┃ ┗ 📜index.jsx ┃ ┃ ┃ ┣ 📂CurrencyListItem ┃ ┃ ┃ ┃ ┣ 📜AvailableCurrencyList.jsx ┃ ┃ ┃ ┃ ┣ 📜DeleteCurrencyButton.jsx ┃ ┃ ┃ ┃ ┗ 📜index.jsx ┃ ┃ ┃ ┣ 📜Currency.css ┃ ┃ ┃ ┣ 📜ValueInput.jsx ┃ ┃ ┃ ┗ 📜index.jsx ┃ ┃ ┗ 📂Title ┃ ┃ ┃ ┣ 📜Title.css ┃ ┃ ┃ ┗ 📜index.jsx ┃ ┣ 📂hooks ┃ ┃ ┗ 📜useData.js ┃ ┣ 📜App.css ┃ ┣ 📜App.js ┃ ┣ 📜App.test.js ┃ ┣ 📜constants.js ┃ ┣ 📜helper.js ┃ ┣ 📜index.js ┃ ┣ 📜reportWebVitals.js ┃ ┗ 📜setupTests.js ┣ 📜.gitignore ┣ 📜LICENSE ┣ 📜README.md ┣ 📜package-lock.json ┗ 📜package.json
Store image that is displayed in this README.md
document.
Contains index.html
(react components are rendered on this file)and the favicon favicon.png
(which is also an image in the web app) for the web app.
Contains react components.
Contains custom hook useData
.
The style sheet for App.js
The top level component.
Contain constants that are used by other files.
Contain helper functions for other files.
This file renders react components onto index.html
.
This file is to ignore certain files so they are not pushed to github.
This document that you are reading.
This file contains:
- the list of dependencies (node libraries that the executable code (and development code) needs)
- scripts: Define the in-project shortcut commands
- Currency API by Fawaz Ahmed (@fawazahmed0)
- Currencies list with emojis by Agu Valeriani (@avaleriani)
- The design is a mix of Julia Dolgova and Anton Mastakov & Evgeny UPROCK's deisgn
- Favicon created by Freepik - Flaticon