https://github.com/epranka/rates
Currency exchanger in just about 100 lines using the Create React App (CRA)
https://github.com/epranka/rates
app calculator cra create-react-app currency demo exchanger javascript rates tutorial web-app
Last synced: 6 months ago
JSON representation
Currency exchanger in just about 100 lines using the Create React App (CRA)
- Host: GitHub
- URL: https://github.com/epranka/rates
- Owner: epranka
- Created: 2020-02-16T10:06:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:25:05.000Z (over 2 years ago)
- Last Synced: 2025-04-11T21:03:07.055Z (6 months ago)
- Topics: app, calculator, cra, create-react-app, currency, demo, exchanger, javascript, rates, tutorial, web-app
- Language: JavaScript
- Homepage: https://rates.now.sh
- Size: 4.1 MB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
$ Currency Exchange App
Using the Create React App (CRA)
Currency exchange app created with the Create React App (CRA) and [exchangeratesapi.io](https://exchangeratesapi.io/) API.
Try it live on this [demo](https://rates.now.sh)
The main implementation is just about 100 lines.
### The App Component
```jsx
import React, { useState, useEffect } from "react";
import "./App.css";
import fetch from "unfetch";
import useSWR from "swr";
import {
Container,
Paper,
Grid,
TextField,
Select,
MenuItem
} from "@material-ui/core";
const API_URL = "https://api.exchangeratesapi.io";
const fetcher = async path => {
const res = await fetch(API_URL + path);
const json = await res.json();
return json;
};
function App() {
const { data: currencies } = useSWR("/latest?base=EUR", fetcher);
const [fromValue, setFromValue] = useState(1);
const [toValue, setToValue] = useState(1);
const [fromCurrency, setFromCurrency] = useState("EUR");
const [toCurrency, setToCurrency] = useState("EUR");
const handleFromCurrencyChange = e => {
setFromCurrency(e.target.value);
};
const handleToCurrencyChange = e => {
setToCurrency(e.target.value);
};
const handleFromValueChange = e => {
setFromValue(parseFloat(e.target.value));
};
const handleToValueChange = e => {
setToValue(parseFloat(e.target.value));
};
const convertFromTo = () => {
const fromRate =
fromCurrency === "EUR" ? 1 : currencies.rates[fromCurrency];
const valueInEur = fromValue / fromRate;
const toRate = toCurrency === "EUR" ? 1 : currencies.rates[toCurrency];
setToValue(valueInEur * toRate);
};
const convertToFrom = () => {
const toRate = toCurrency === "EUR" ? 1 : currencies.rates[toCurrency];
const valueInEur = toValue / toRate;
const fromRate =
fromCurrency === "EUR" ? 1 : currencies.rates[fromCurrency];
setFromValue(valueInEur * fromRate);
};
useEffect(() => {
convertFromTo();
}, [fromValue, toCurrency]);
useEffect(() => {
convertToFrom();
}, [toValue, fromCurrency]);
if (!currencies) {
return null;
}
return (
Currency exchange
EUR
{Object.keys(currencies.rates).map((rate, key) => (
{rate}
))}
EUR
{Object.keys(currencies.rates).map((rate, key) => (
{rate}
))}
);
}
export default App;
```
### CSS
```css
h1 {
font-weight: 300;
color: #636363;
margin-bottom: 3rem;
}
.currency-exchange-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.currency-exchange-paper {
max-width: 350px;
padding: 30px 30px 40px 30px;
}
.MuiInput-root {
width: 100%;
}
```