Currency Converter Project Upload

Author: bhattidev

07_currencyConverter/src/App.css

@@ -5,38 +5,6 @@
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+body {
+  background-image: url('./assets/1.jpg');
 }

07_currencyConverter/src/App.jsx

@@ -1,12 +1,93 @@
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { InputBox } from './components';
+import useCurrencyInfo from './hooks/useCurrencyInfo';
 
 import './App.css';
 
 function App() {
+  const [amount, setAmount] = useState('');
+  const [from, setFrom] = useState('usd');
+  const [to, setTo] = useState('pkr');
+  const [convertedAmount, setConvertedAmount] = useState();
+  const currencyInfo = useCurrencyInfo(from);
+  const options = Object.keys(currencyInfo);
+
+  const swap = () => {
+    setFrom(to);
+    setTo(from);
+  };
+
+  const convert = () => {
+    const amountValue = parseFloat(amount);
+    setConvertedAmount(amountValue * currencyInfo[to]);
+  };
+
+  const handleAmountChange = (newAmount) => {
+    if (newAmount >= 0 || newAmount === '') {
+      setAmount(newAmount);
+    }
+  };
+
+  useEffect(() => {
+    convert();
+  }, [amount, from, to, currencyInfo]);
+
   return (
-    <>
-      <h1 className='text-3xl bg-orange-500'>Currency Converter</h1>
-    </>
+    <div
+      className='w-full h-screen flex flex-wrap justify-center items-center bg-cover'
+      style={{
+        backgroundImage: 'url("")',
+      }}
+    >
+      <div className='w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat'>
+        <div className='w-full'>
+          <div className='w-full max-w-md mx-auto border border-gray-60 rounded-lg p-5 backdrop-blur-sm bg-white/30'>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                convert();
+              }}
+            >
+              <div className='w-full mb-1'>
+                <InputBox
+                  label='From'
+                  amount={amount}
+                  currencyOptions={options}
+                  onCurrencyChange={(currency) => setFrom(currency)}
+                  selectCurrency={from}
+                  onAmountChange={handleAmountChange}
+                />
+              </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
+                />
+              </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>
+    </div>
   );
 }
 

07_currencyConverter/src/assets/1.jpg

@@ -1,30 +1,51 @@
-import React from 'react';
+import React, { useId } from 'react';
 
 function InputBox({
   label,
   amount,
   onAmountChange,
   onCurrencyChange,
-  currencyOption = [],
+  currencyOptions = [],
   selectCurrency = 'usd',
   amountDisable = false,
-
+  currencyDisable = false,
   className = '',
 }) {
+  const amountInputId = useId();
   return (
     <div className={`bg-white p-3 rounded-lg text-sm flex ${className}`}>
       <div className='w-1/2'>
-        <label className='text-black/40 mb-2 inline-block'>label</label>
+        <label
+          className='text-black/40 mb-2 inline-block'
+          htmlFor={amountInputId}
+        >
+          {label}
+        </label>
         <input
+          id={amountInputId}
           className='outline-none w-full bg-transparent py-1.5'
           type='number'
           placeholder='Amount'
+          disabled={amountDisable}
+          value={amount}
+          onChange={(e) =>
+            onAmountChange && onAmountChange(Number(e.target.value))
+          }
         />
       </div>
       <div className='w-1/2 flex flex-wrap justify-end text-right'>
         <p className='text-black/40 mb-2 w-full'>Currency Type</p>
-        <select className='rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none'>
-          <option value='usd'>usd</option>
+        <select
+          className='rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none'
+          value={selectCurrency}
+          onChange={(e) => onCurrencyChange && onCurrencyChange(e.target.value)}
+          disabled={currencyDisable}
+        >
+          {currencyOptions.map((currency) => (
+            <option value={currency} key={currency}>
+              {currency}
+            </option>
+          ))}
         </select>
       </div>
     </div>

07_currencyConverter/src/assets/bgImg.jpg

@@ -0,0 +1,2 @@
+import InputBox from './InputBox';
+export { InputBox };

07_currencyConverter/src/assets/react.svg

@@ -9,7 +9,7 @@ function useCurrencyInfo(currency) {
       .then((res) => res.json())
       .then((res) => setData(res[currency]));
   }, [currency]);
-  console.log(data);
+
   return data;
 }
 export default useCurrencyInfo;