Currency Converter

The currency converter is to allow users to input an amount in one currency and convert it into another currency based on current exchange rates.

Features:

1. User Input:
   • Amount: The user enters the amount they wish to convert in a numeric input field.
   • From Currency: A dropdown list allows the user to select the source currency (the currency the user is converting from).
   • To Currency: A second dropdown list allows the user to select the destination currency (the currency the user is converting to).
2. Currency Options:
   • The currency options in both dropdowns will dynamically populate when the page loads. The available currencies are typically listed by their ISO 4217 currency codes (e.g., USD, EUR, GBP).
3. Conversion Button:
   • Convert Button: A button labeled “Convert” triggers the conversion process when clicked. Upon conversion, the result is displayed in a dedicated section below the form.
4. Result Display:
   • After the conversion, the result is shown in a section titled Converted Amount. The converted amount is displayed with the appropriate formatting (rounded to two decimal places).
5. Responsive Design:
   • The page is designed to be responsive, adjusting for different screen sizes, and is mobile-friendly. The layout uses flexbox for centering and adjusting content size.
6. Form Design:
   • Labels are used for each input field, and both input and select fields have consistent styling (e.g., border radius, padding).
   • Fields are designed with a clean, modern style, ensuring ease of use and clear distinctions between each field.
   • The button is styled to stand out with a green background, and there are hover and active effects to provide feedback to the user.
7. Currency Dropdown (Select2 Library):
   • The dropdowns for selecting currencies use the Select2 jQuery plugin, which provides an enhanced UI with features like searchability, better styling, and custom dropdown behavior.
8. Form Validation:
   • The currency converter checks whether a valid amount has been entered before attempting the conversion.
   • If the user doesn’t enter a valid amount or leaves any field blank, they will be prompted with an alert to provide the necessary input.
9. Visual Design:
   • The overall visual style uses soft colors (light gray background, white container, and green for buttons) for a pleasant and intuitive user experience.
   • The result section is shown in a separate box with a light green background and displays the converted amount prominently.
10. Loading Currency Options:
    • Upon page load, the application fetches a list of available currencies and populates the dropdowns with these options. This list is automatically generated and displayed for user selection.
11. Responsive Layout:
    • The layout adapts to different screen sizes, ensuring usability across devices such as phones, tablets, and desktops.

How to Use:

1. Enter Amount: Type the amount you want to convert into the input field labeled “Amount.”
2. Select From Currency: Use the dropdown list to choose the currency you’re converting from (e.g., USD).
3. Select To Currency: Use the second dropdown to choose the currency you’re converting to (e.g., EUR).
4. Convert: Click the “Convert” button to initiate the conversion.
5. View Result: After conversion, the equivalent amount in the “To Currency” will be displayed below the form.