Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"From Currency Type" BOX OPTION is not working in your code #54

Open
parthh1112 opened this issue Jan 16, 2024 · 7 comments
Open

"From Currency Type" BOX OPTION is not working in your code #54

parthh1112 opened this issue Jan 16, 2024 · 7 comments

Comments

@parthh1112
Copy link

"From Currency Type" box is showing the options of different currency but when we are selecting the option it is not changing it remain on USD option only

i have resolve this bug you can check it from here

https://github.com/parthh1112/React/tree/main/11CustomHookCurrencyConverter/src

@AliGates915
Copy link

Now check: because adding new Features like Reset Button
https://github.com/AliGates915/React-Basic-Projects/tree/main/currency-converter/src

Currency Converter

@DraGonoff69
Copy link

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

@sameekshaagupta
Copy link

@sameekshaagupta
Copy link

also there was some error in input box.try using this code <div className="w-full mb-1"> <InputBox 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"> <InputBox label="To" amount={convertedAmount} currencyOptions={options} onCurrencyChange={(currency) => setTo(currency)} selectCurrency={to} amountDisable onAmountChange={(amount) => setAmount(amount)} /> </div>

@AliGates915
Copy link

AliGates915 commented May 28, 2024

setFrom(currency)} selectCurrency={from} onAmountChange={(amount) => setAmount(amount)} />
        <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-2xl text-white 
          px-2 py-0.5"
            onClick={swap}
          >Swap
          </button>
        </div>
        <div className="w-full mt-1 mb-4">
          <InputBox
            label="To"
            amount={convertedAmount}
            currencyOption={options}
            onCurrencyChange={(currency) => setTo(currency)}
            selectCurrency={to}
            amountDisable
          />
        </div> 

"Try run this code at the last after the amountDisable no need to add other line of code."

@AliGates915
Copy link

AliGates915 commented May 28, 2024

new api link:https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${currency}.json

"Your API works on localhost and can be used anywhere. However, I am unable to access your API because it is not open."

@AliGates915
Copy link

AliGates915 commented May 28, 2024

https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json
Now @sameekshaagupta this API is working perfectly, you change ${currency} instead of usd.

#125 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants