Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/readpato/exchange-rates-webpage
A simple website that allows the user to see the exchange rates from the day.
https://github.com/readpato/exchange-rates-webpage
Last synced: 4 days ago
JSON representation
A simple website that allows the user to see the exchange rates from the day.
- Host: GitHub
- URL: https://github.com/readpato/exchange-rates-webpage
- Owner: Readpato
- Created: 2022-01-08T16:28:20.000Z (about 3 years ago)
- Default Branch: gh-pages
- Last Pushed: 2022-02-28T17:21:27.000Z (almost 3 years ago)
- Last Synced: 2024-12-24T18:49:46.737Z (16 days ago)
- Language: JavaScript
- Homepage:
- Size: 207 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Exchange Rates Webpage
## Description
A simple website that allows the user to see the exchange rates from the day for a selected amount of money.
Try it here: Demo
### Technologies Used
For this project the technologies and tools used were:
- Vanilla JavaScript
- Bootstrap
- CSS
- SASS
- HTML
- NPM
- Cypress
- API: Link
#
## Installation
As this project runs with Bootstrap and Cypress you will have to have NPM or anything similar and then run this little code snippet on the CLI.
```
npm install
```
This will allow to download the dependencies you need to run the Exchange Rates Webpage properly.
#
## Utilization
The webpage is pretty straightforward. There are three elements that take the user input:
- One input element that allows the user to insert the amount of money that he/she wishes to convert.
- One select element that allows the election of the base type of currency.
- One select element that allows the election of the expected type of currency.
Then, there are two last elements:
- A button that will trigger the JavaScript functions needed to create the convertion.
- A div that will show the results once it's ready.
When all the fields are completed, the user can simply click the "Convert" button and it will display the result.
Should the user insert wrong inputs or even forget to insert any data, the form validators will show some errors in the display to make clear that the user needs to fix them.
#
## Challenges Faced
This project brought fresh challenges to overcome like:
- Learning about promises and asynchronous code.
- Learning about APIs.
#
## What I learned
- With this challenge I learned how promises work in JavaScript. It wasn't easy as I had to wrap my mind around the idea of async code. I had to read some MDN articles to properly wrap my mind around it for good, but once it clicked the excercise was easier to solve.
- I have also learned about APIs and their architecture, especifically the REST (Representational State Transfer) ones. This was a nice finding as I can really get behind the idea of a structured way to send a resource. I will still investigate more about this subject because it interests me at a personal level.
- Another thing that I keep learning more about each time I keep coming back to it is Bootstrap framework. It's really useful when you want to build quickly responsive pages in an easy way.
#
## Support
If some error should appear, you can contact me through:
- Twitter: @patoraedler
- Email: [email protected]
#
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate :)
#
## Author
Patrick Raedler.
#