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 */} +
+
+
{ + e.preventDefault(); + convert(); + }} + > + {/* Input box for 'from' currency */} +
+ setAmount(amount)} + onCurrencyChange={() => setAmount(amount)} + /> +
+
+ {/* Button to swap 'from' and 'to' currencies */} + +
+
+ {/* Input box for 'to' currency */} + setTo(currency)} + /> +
+ {/* Button to initiate currency conversion */} + +
+
+
+
+
+ + ); +} + +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%; + } }