Currency Exchanger

A web-based application to convert an amount in U.S. dollars to the currency of the user's choice.

By Jessica R. Williams

Table of Contents

1. Preview
2. Technologies Used
3. Description
4. The Assignment Prompt
5. API Key Procurement
6. Setup/Installation Requirements
7. Additional Setup/Installation Note for Windows Users
8. Known Bugs
9. License
10. Contact Information

Preview

Direct your browser to a live version on GitHub Pages.

Technologies Used

• Babel/core 7.6.4
• Babel/plugin-transform-modules-commonjs 7.6.0
• Bootstrap 4.5.0
• clean-webpack-plugin 3.0.0
• CSS
• css-loader 3.2.0
• dotenv-webpack@2.0.0
• eslint 6.3.0
• eslint-loader 3.0.0
• file-loader 1.1.6
• HTML5
• html-loader 0.5.5
• html-webpack-plugin 3.2.0
• JavaScript ES6
• Jest 24.9.0
• jQuery 3.5.1
• Node Package Manager 6.14.9
• popper.js 1.16.1
• style-loader 1.0.0
• webpack 4.39.3
• webpack-cli 3.3.8
• webpack-dev-server 3.11.2

Description

This is a web-based application to convert U.S. Dollars to the currency of the user's choice. The user enters an amount of U.S. currency and then selects a currency to convert to from a drop down box of the 160 commonly circulating world currencies. Once the user clicks the submit button the application interacts with the ExchangeRate-API to get the current days exchange rate. If the API call is successful the application displays the converted amount. If the API call is not successful the application displays the error message from the API.

The Assignment Prompt

A user should be able to type in an amount (in U.S. dollars) and then choose which currency it should be converted to (such as francs, marks, rupees, and so on).

• A user should be able to enter an amount (in U.S. dollars) and then specify another currency (such as the South Korean won). The user should then see the total amount they entered in converted currency.
• Users should be able to convert U.S. currency into at least 5 other types of currency.
• If the API call results in an error (any message not a 200 OK), the application should return a notification to the user that states what the error is.
• If the query response doesn't include that particular currency, the application should return a notification that states the currency in question doesn't exist.

API Key Procurement

_This application uses the ExchangeRate-API. You will need to make an account and get an API key if you wish to recreate the project environment on your local. The "Free Plan" allows for 2000 API calls per month.

• Visit the ExchangeRate-API site.
• Input your email address and click the "Get Free Key" button.
• You'll be prompted to create an account with your email, first name and a password. Agree to the terms of use, click "Get Started!" and confirm your email address.
• Access your account dashboard that includes your API key as well as your remaining API calls for the month.

Setup/Installation Requirements

• Open the terminal on your local machine
• If Node.js and Nope Package Manager (npm) are not installed on your local device, follow the instructions here
• Navigate to the directory inside of which you wish to house this project
• Clone this project with the following git command $ git clone <https://github.com/jessicarubinwilliams/project>
• Navigate to the top level of the repository with the command $ cd project
• Recreate project environment and install required dependencies with terminal command $ npm install
• Create file for storing environmental variables you want to keep secret (such as an API key)$ touch .env
• Open the project in your text editor
• Add the following line of code to the .env file API_KEY=insert-your-API-key-here where you substitute the API key you got by following the instructions above for the "insert-your-API-key-here". The following is an example using a fake API key: API_KEY=1234567890
• Create production environment with terminal command $ npm run build
• Open project in a development server in the browser of your choice with the command $ npm run start
• Lint code with the command $ npm run lint
• Run tests in Jest with the command $ npm test

Additional Setup/Installation Note for Windows Users

This environment was created on a Mac. For it to work properly in your local environment make the following change:

• Update package.json, line 8 to: "start": "npm run build & webpack-dev-server --open --mode development",

Known Bugs

• There are no validation checks on the user's input
• There is no CSS styling

License

MIT

Copyright (c) 2021 Jessica R. Williams

Contact Information

Jessica R. Williams mailto