play: implementing currency converter with real-time rate fetching (#…

…1492)

*play: implementing currency converter with real-time rate fetching (#1492)

* fix(currencyConverter): resolve ui issue with layout

src/common/search/search.css

@@ -139,7 +139,7 @@
   }
 }
 
-@media screen and (max-width:494px) {
+@media screen and (max-width: 494px) {
   .filter {
     display: grid;
     justify-content: center;

src/plays/currencyconverter/Currencyconverter.js

@@ -0,0 +1,94 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState } from 'react';
+import InputBox from './InputBox';
+import useCurrencyInfo from './hooks/useCurrencyInfo';
+
+// WARNING: Do not change the entry componenet name
+function Currencyconverter(props) {
+  // State for input values
+  const [from, setFrom] = useState('bdt');
+  const [to, setTo] = useState('usd');
+  const [amount, setAmount] = useState(0);
+  const [convertedAmount, setConvertedAmount] = useState(0);
+
+  // Fetch currency info based on 'from' currency
+  const currencyInfo = useCurrencyInfo(from);
+  const options = Object.keys(currencyInfo);
+
+  // Function to swap 'from' and 'to' currencies
+  const swap = () => {
+    setFrom(to);
+    setTo(from);
+    setConvertedAmount(amount);
+    setAmount(convertedAmount);
+  };
+
+  // Function to convert currency
+  const convert = () => {
+    setConvertedAmount(amount * currencyInfo[to]);
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        {/* Play header */}
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Main Container */}
+          <div className="w-full flex flex-wrap justify-around items-center">
+            <div className="border border-gray-60 rounded-lg p-5 backdrop-blur-sm bg-white/30">
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  convert();
+                }}
+              >
+                {/* Input box for 'from' currency */}
+                <div className="w-full mb-1">
+                  <InputBox
+                    amount={amount}
+                    currencyOptions={options}
+                    label="From"
+                    selectCurrency={from}
+                    onAmountChange={(amount) => setAmount(amount)}
+                    onCurrencyChange={() => setAmount(amount)}
+                  />
+                </div>
+                <div className="relative w-full h-0.5">
+                  {/* Button to swap 'from' and 'to' currencies */}
+                  <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"
+                    type="button"
+                    onClick={swap}
+                  >
+                    SWAP
+                  </button>
+                </div>
+                <div className="w-full mt-1 mb-4">
+                  {/* Input box for 'to' currency */}
+                  <InputBox
+                    amountDisable
+                    amount={convertedAmount}
+                    currencyOptions={options}
+                    label="To"
+                    selectCurrency={to}
+                    onCurrencyChange={(currency) => setTo(currency)}
+                  />
+                </div>
+                {/* Button to initiate currency conversion */}
+                <button
+                  className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg"
+                  type="submit"
+                >
+                  Convert {from.toUpperCase()} TO {to.toUpperCase()}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Currencyconverter;

src/plays/currencyconverter/InputBox.jsx

@@ -0,0 +1,57 @@
+import { useId } from 'react';
+
+const InputBox = ({
+  label,
+  amount,
+  onAmountChange,
+  onCurrencyChange,
+  currencyOptions = [],
+  selectCurrency = 'usd',
+  amountDisable = false,
+  currencyDisable = false,
+  className = ''
+}) => {
+  // Generate a unique ID for the input field
+  const amountInputId = useId();
+
+  return (
+    <div className={`bg-white p-3 rounded-lg text-sm flex ${className}`}>
+      {/* Input field for the amount */}
+      <div className="w-1/2">
+        <label className="text-black/40 mb-2 inline-block" htmlFor={amountInputId}>
+          {label}
+        </label>
+        <input
+          className="outline-none w-full bg-transparent py-1.5"
+          disabled={amountDisable}
+          id={amountInputId}
+          placeholder="Amount"
+          type="number"
+          value={amount}
+          onChange={(e) => onAmountChange && onAmountChange(Number(e.target.value))}
+        />
+      </div>
+
+      {/* Currency Selection */}
+      <div className="w-1/2 flex flex-wrap justify-end text-right">
+        <p className="text-black/40 mb-2 w-full">Currency Type</p>
+        {/* Dropdown for selecting currency */}
+        <select
+          className="rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none"
+          disabled={currencyDisable}
+          value={selectCurrency}
+          onChange={(e) => onCurrencyChange && onCurrencyChange(e.target.value)}
+        >
+          {/* Mapping through currency options */}
+          {currencyOptions.map((currency, index) => (
+            <option key={index} value={currency}>
+              {currency}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default InputBox;

src/plays/currencyconverter/Readme.md

@@ -0,0 +1,34 @@
+# currencyConverter
+
+Develop a web-based currency converter. Users input an amount and select currencies to convert. Real-time exchange rates are fetched via an API.
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: sabbir2809
+- Gihub Link: https://github.com/sabbir2809
+- Blog:
+- Video:
+
+## Implementation Details
+
+- useState: Keep track of user inputs and app data.
+- useEffect: Fetch exchange rates when the app starts or when the user changes currencies.
+- Fetch: Get exchange rates from an online service.
+- Async/Await: Wait for exchange rate data to be ready before using it.
+- API: Special online service providing exchange rates.
+- Tailwind: Make your app look nice without hard-coding styles.
+- Custom Hooks: Reuse code for common tasks like fetching data.
+
+## Consideration
+
+## Resources
+
+- React Documentation: Learn useState, useEffect, and custom hooks.
+- Tailwind CSS Documentation: Style your app with utility classes.
+- Async/Await in JavaScript: Handle asynchronous operations.
+- API Documentation: Fetch exchange rates from APIs.

src/plays/currencyconverter/hooks/useCurrencyInfo.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+// Custom hook to fetch currency information
+const useCurrencyInfo = (currency) => {
+  // State to hold currency data
+  const [data, setData] = useState({});
+
+  // Fetch currency data when currency changes
+  useEffect(() => {
+    fetch(
+      `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${currency}.json`
+    )
+      .then((response) => {
+        // If not successful, throw an error
+        if (!response.ok) {
+          throw new Error('Failed to fetch currency data');
+        }
+
+        // Parse response JSON
+        return response.json();
+      })
+      .then(({ [currency]: currencyData }) => setData(currencyData))
+      .catch((error) => {
+        console.error('Error fetching currency data:', error);
+      });
+  }, [currency]); // Dependency array with currency
+
+  // Return currency data
+  return data;
+};
+
+export default useCurrencyInfo;

src/plays/language-translater/Readme.md

@@ -11,8 +11,8 @@ Language Translator is a web application built with React.js that allows users t
 
 - User: Venkat-3010
 - Gihub Link: https://github.com/Venkat-3010
-- Blog: 
-- Video: 
+- Blog:
+- Video:
 
 ## Implementation Details
 
@@ -31,12 +31,12 @@ The `Language Translator` is implemented with below steps.
 - Translate button: Initiates the translation using `Fetch API`.
 - Copy button: uses `clipboard` to copy the input and translated text.
 - Listen button: Reads out the the input and translated text using `SpeechSynthesisUtterance`.
-- Language Switch: Allows users to swap the source and target languages. 
+- Language Switch: Allows users to swap the source and target languages.
 
 ## Consideration
 
 Update all considerations(if any)
 
 ## Resources
 
-API source: https://mymemory.translated.net/
+API source: https://mymemory.translated.net/

src/plays/language-translater/styles.css

@@ -115,17 +115,18 @@
 }
 
 @media (max-width: 1024px) {
-    .Language-Translator_body{
-        font-size: small;
-    }
-    .Language-Translator_container{
-        flex-direction: column;
-        align-items: center;
-        margin: 0;
-    }
-
-    .Language-Translator_sourceLang, .Language-Translator_targetLang{
-        width: 80vw;
-        height: 60%;
-    }
+  .Language-Translator_body {
+    font-size: small;
+  }
+  .Language-Translator_container {
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+  }
+
+  .Language-Translator_sourceLang,
+  .Language-Translator_targetLang {
+    width: 80vw;
+    height: 60%;
+  }
 }