You are viewing a single comment's thread. Return to all comments →
Lazy solution and not really optimized, I know:
import React from "react"; import { cryptocurrencyList } from "../cryptocurrency-list"; const bal = 17042.67 function roundTo8Decimals(num) { return Number(num.toFixed(8)); } function isNumber(value) { return typeof value === 'number'; } function Main() { const [val, setVal] = React.useState() const [error, setError] = React.useState() const isFirstRenderRef = React.useRef(true); React.useEffect(() => { if (isFirstRenderRef.current) { isFirstRenderRef.current = false; return } if (val === '') { setError('Amount cannot be empty'); } else if (val < 0.01) { setError('Amount cannot be less than $0.01'); } else if (val > 17042.67) { setError('Amount cannot exceed the available balance'); } else { setError(); } }, [val]) return ( <div className="layout-column align-items-center mx-auto"> <h1>CryptoRank Exchange</h1> <section> <div className="card-text layout-column align-items-center mt-12 px-8 flex text-center"> <label> I want to exchange $ <input className="w-10" data-testid="amount-input" required type="number" placeholder="USD" onChange={(e) => setVal(e.target.value)} value={val} /> of my $ <span>{bal}</span>: </label> {error && <p data-testid="error" className="form-hint error-text mt-3 pl-0 ml-0"> {error} </p>} </div> </section> <div className="card card-text mt-10 mx-4"> <table className="mb-0"> <thead> <tr> <th>Cryptocurrency</th> <th>Exchange Rate</th> <th>Number of Coins</th> </tr> </thead> <tbody data-testid="exchange-data"> {cryptocurrencyList.map((crypto, idx) => { return (<tr key={idx}> <td>{crypto.name}</td> <td>1 USD = {crypto.rate} {crypto.code}</td> <td> {val && !error && roundTo8Decimals(val * crypto.rate)} {!val && !error && '0.00000000'} {error && 'n/a'} </td> </tr> ) })} </tbody> </table> </div> </div> ); } export default Main;
Seems like cookies are disabled on this browser, please enable them to open this website
CryptoRank Exchange
You are viewing a single comment's thread. Return to all comments →
Lazy solution and not really optimized, I know: