diff --git a/src/common/search/search.css b/src/common/search/search.css
index f74c4fe8e1..f3db85a063 100644
--- a/src/common/search/search.css
+++ b/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;
diff --git a/src/plays/currencyconverter/Currencyconverter.js b/src/plays/currencyconverter/Currencyconverter.js
new file mode 100644
index 0000000000..85ed55377e
--- /dev/null
+++ b/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 (
+ <>
+
+ {/* Play header */}
+
+
+ {/* Main Container */}
+
+
+
+ >
+ );
+}
+
+export default Currencyconverter;
diff --git a/src/plays/currencyconverter/InputBox.jsx b/src/plays/currencyconverter/InputBox.jsx
new file mode 100644
index 0000000000..71109c9dfb
--- /dev/null
+++ b/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 (
+
+ {/* 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/currencyconverter/Readme.md b/src/plays/currencyconverter/Readme.md
new file mode 100644
index 0000000000..526a00b36f
--- /dev/null
+++ b/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.
diff --git a/src/plays/currencyconverter/cover.png b/src/plays/currencyconverter/cover.png
new file mode 100644
index 0000000000..bef9c6a402
Binary files /dev/null and b/src/plays/currencyconverter/cover.png differ
diff --git a/src/plays/currencyconverter/hooks/useCurrencyInfo.jsx b/src/plays/currencyconverter/hooks/useCurrencyInfo.jsx
new file mode 100644
index 0000000000..7a63667747
--- /dev/null
+++ b/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;
diff --git a/src/plays/language-translater/Readme.md b/src/plays/language-translater/Readme.md
index 1157e05cbb..d0d8311f4d 100644
--- a/src/plays/language-translater/Readme.md
+++ b/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,7 +31,7 @@ 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
@@ -39,4 +39,4 @@ Update all considerations(if any)
## Resources
-API source: https://mymemory.translated.net/
\ No newline at end of file
+API source: https://mymemory.translated.net/
diff --git a/src/plays/language-translater/styles.css b/src/plays/language-translater/styles.css
index 03124a1f43..90cd3738c3 100644
--- a/src/plays/language-translater/styles.css
+++ b/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%;
+ }
}