Comments (7)
Now check: because adding new Features like Reset Button
https://github.com/AliGates915/React-Basic-Projects/tree/main/currency-converter/src
from chai-aur-react.
import { useState } from 'react'
import {Input} from '../components/index'
import useCurrencyInfo from '../hooks/useCurrencyInfo'
function CurrencyConvertor() {
const [amount, setAmount] = useState()
const [from, setFrom] = useState("usd")
const [to, setTo] = useState("inr")
const [convertedAmount, setConvertedAmount] = useState(0)
const currencyInfo = useCurrencyInfo(from)
const options = Object.keys(currencyInfo)
const swap = () => {
setFrom(to)
setTo(from)
setConvertedAmount(amount)
setAmount(convertedAmount)
}
const convert = () => {
setConvertedAmount(amount * currencyInfo[to])
}
return (
<div
className="w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat"
style={{
backgroundImage: url('https://images.pexels.com/photos/3532540/pexels-photo-3532540.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')
,
}}
>
<form
onSubmit={(e) => {
e.preventDefault();
convert()
}}
>
<div className="w-full mb-1">
<Input
label="From"
amount={amount}
currencyOptions={options}
onCurrencyChange={(currency) => setFrom(currency)}
selectCurrency={from}
onAmountChange={(amount) => setAmount(amount)}
/>
</div>
<div className="relative w-full h-0.5">
<button
type="button"
className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-white rounded-md bg-blue-600 text-white px-2 py-0.5"
onClick={swap}
>
swap
</button>
</div>
<div className="w-full mt-1 mb-4">
<Input
label="To"
amount={convertedAmount}
currencyOptions={options}
onCurrencyChange={(currency) => setTo(currency)}
selectCurrency={to}
amountDisable
/>
</div>
<button type="submit" className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg">
Convert {from.toUpperCase()} to {to.toUpperCase()}
</button>
</form>
</div>
</div>
</div>
);
}
export default CurrencyConvertor
This is the correct code. Replace it with your current app.jsx code . then it should work properly
from chai-aur-react.
Related Issues (20)
- AppWrite account scope issue HOT 10
- tinyMCE Api Key Problem HOT 3
- Appwrite Query Issue
- Appwrite createEmailSession is not a function HOT 6
- Editing and saving one todo clears input fields of other todos HOT 1
- Issue in Password generator project HOT 1
- Replace old api with new api
- Bug in Password Generator HOT 3
- Post upload error
- Added the update functionality in the reactTodoToolkit
- React-javasctipt HOT 1
- not able to generate new post HOT 3
- slug
- A slight typo error that "appwriteService" wrap in useEffect HOT 1
- Appwrite serive :: getCurrentUser :: error TypeError: Failed to construct 'URL': Invalid URL error in appwrite HOT 15
- After refreshing page getting logout HOT 1
- ISSUE: currency-api migrated to exchange-api HOT 3
- ISSUE: Inefficient placement of api call in Allpages.jsx
- backend issues HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chai-aur-react.