diff --git a/src/plays/currencyconvertor/Currency-convertor.jsx b/src/plays/currencyconvertor/Currency-convertor.jsx
new file mode 100644
index 000000000..e856ce524
--- /dev/null
+++ b/src/plays/currencyconvertor/Currency-convertor.jsx
@@ -0,0 +1,96 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState } from 'react';
+import InputBox from './InputBox';
+import useCurrencyInfo from './hooks/useCurrencyInfo';
+import './styles.css';
+
+function Currencyconvertor(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 (
+ <>
+
+ {/* Play header */}
+
+
+ {/* Main Container */}
+
+
+
+ >
+ );
+}
+
+export default Currencyconvertor;
diff --git a/src/plays/currencyconvertor/InputBox.jsx b/src/plays/currencyconvertor/InputBox.jsx
new file mode 100644
index 000000000..71109c9df
--- /dev/null
+++ b/src/plays/currencyconvertor/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 (
+
+ {/* Input field for the amount */}
+
+
+ onAmountChange && onAmountChange(Number(e.target.value))}
+ />
+
+
+ {/* Currency Selection */}
+
+
Currency Type
+ {/* Dropdown for selecting currency */}
+
+
+
+ );
+};
+
+export default InputBox;
diff --git a/src/plays/currencyconvertor/Readme.md b/src/plays/currencyconvertor/Readme.md
new file mode 100644
index 000000000..8db154d72
--- /dev/null
+++ b/src/plays/currencyconvertor/Readme.md
@@ -0,0 +1,27 @@
+# currency-convertor
+
+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: Beginner
+
+## Creator Information
+
+- User: sabbir2809
+- Gihub Link: https://github.com/sabbir2809
+- Blog: NA
+- Video: NA
+
+## Implementation Details
+
+N/A
+
+## Consideration
+
+N/A
+
+## Resources
+
+N/A
diff --git a/src/plays/currencyconvertor/cover.png b/src/plays/currencyconvertor/cover.png
new file mode 100644
index 000000000..bef9c6a40
Binary files /dev/null and b/src/plays/currencyconvertor/cover.png differ
diff --git a/src/plays/currencyconvertor/hooks/useCurrencyInfo.jsx b/src/plays/currencyconvertor/hooks/useCurrencyInfo.jsx
new file mode 100644
index 000000000..7a6366774
--- /dev/null
+++ b/src/plays/currencyconvertor/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;
diff --git a/src/plays/currencyconvertor/styles.css b/src/plays/currencyconvertor/styles.css
new file mode 100644
index 000000000..e99aa21e2
--- /dev/null
+++ b/src/plays/currencyconvertor/styles.css
@@ -0,0 +1,3 @@
+.bg-img {
+ background-image: url('cover.png');
+}