Currency Converter Javascript

The ability to perform currency conversion in such a fast way will be a skill that will be very useful for developers who are developing websites or applications that are globalised. Besides JavaScript, there are other options. However, JavaScript is a great option for developing a currency converter due to its flexibility and high usage. This tutorial is going to be a step-by-step guide to making a currency converter using JavaScript, which is both simple and efficient.

Requirements: You must understand HTML, CSS, and JavaScript basics. You will also need to install a code editor such as Sublime Text or Visual Studio.

Setting Up the HTML Structure:

Develop the HTML skeleton for your currency converter before. As a starting point, utilise the following template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currency Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="converter">
        <h1>Currency Converter</h1>
        <label for="amount">Enter Amount:</label>
        <input type="number" id="amount" placeholder="Enter amount">

        <label for="fromCurrency">From Currency:</label>
        <select id="fromCurrency">
            
        </select>

        <label for="toCurrency">To Currency:</label>
        <select id="toCurrency">
            
        </select>

        <button onclick="convertCurrency()">Convert</button>

        <p id="result">Result will appear here</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

Explanation:

In the first line stands the HTML code that defines the structure of the currency converter web page. Then, we have the usual doctype declaration, followed by meta tags for the viewport and the character set. The page starts with "Currency Converter" as its title, and the stylesheet "styles.css" is referenced to be used for styling purposes.

The page content lies inside a container div with the class "converter" which is located within the body. This content is organised as follows: a h1 heading with the content "Currency Converter", input fields for entering amount, dropdown menus to select the source and target currency, a button labeled "Convert" that invokes a JavaScript function, and a paragraph element with ID "result" that display the output of conversion.

Creating the CSS Style (styles.css):

For the sake of more appealing your currency converter, you can optionally apply a bit of design. Make it your own by personalizing it.

body {
    font-family: 'Arial', sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
}

.converter {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    padding: 20px; 
    text-align: center; 
}

input, select, button {
    margin-bottom: 10px; 
    padding: 8px; 
}

button {
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
    border: none; 
}

button:hover {
    background-color: #45a049;
}

Explanation:

The CSS code provides styles for creating a fully featured and visually appealing currency converter webpage. The background is applied in a tiny grey coloration, and the content is centered vertically and horizontally on the viewport using flexbox characteristics. The body section sets the Arial font family as the first step of the overall page layout. Thanks to the height: 100vh configuration, the body will occupy the whole height of the viewport.

The.converter class is defined with a white background, rounded edges (border-radius: 12px), and a subtle box shadow to generate a depth illusion. Next, we are going to discuss the style of the currency converter container. To achieve a neat look, the text inside the container is centered off, and the padding is applied to be spaced.

The following section gives the styles for all the input fields, buttons, and dropdown menus to be used by the converter. The cements between these elements have fixed spaces, with a Margin-bottom of 10 pixels and a padding of 8 pixels specified for each.

To finish up, the "Convert" button now has a special design. The white-colored background text, an active pointer cursor, and the green background color (#4caf50) are included in it. It looks cleaner because the default button border is gone (border: diversity of rhizobia associated with different plant species cannot be sufficiently addressed by improving only one IC). Moreover, a hover effect is implemented to give users a visual track of their interactions by changing the button's background color (#45a049) when hovering the mouse over it. A CSS code's primary purpose is to deliver an appealing and user-friendly currency converter software interface.

Now, let's move on to the JavaScript part (script.js):

const exchangeRates = {
    USD: 1,
    EUR: 0.85,
    GBP: 0.73,
    JPY: 110.17,
    INR: 74.43,
};
const fromCurrencySelect = document.getElementById('fromCurrency');
const toCurrencySelect = document.getElementById('toCurrency');

For (let currency in exchangeRates) {
    
    const option1 = document.createElement('option');
    option1.value = currency; 
    option1.text = currency; 
    fromCurrencySelect.add(option1); 

    
    const option2 = document.createElement('option');
    option2.value = currency; 
    option2.text = currency; 
    toCurrencySelect.add(option2); 
}

function convertCurrency() {
    
    const amount = parseFloat(document.getElementById('amount').value);
    const fromCurrency = fromCurrencySelect.value;
    const toCurrency = toCurrencySelect.value;

    if (isNaN(amount)) {
        alert('Please enter a valid number');
        return;
    }

    // Calculate the converted amount using the exchange rates
    const convertedAmount = amount * (exchangeRates[toCurrency] / exchangeRates[fromCurrency]);

    // Update the HTML element with the ID 'result' to display the conversion result
    document.getElementById('result').innerText = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
}

Output:

The supplied JavaScript code creates an executable currency converter function available on a web page. First, set an object exchangeRates to store exchange rates between different currencies and the US dollar (USD). For instance, the rates for the British pound (GBP), Indian rupee (INR), Japanese yen (JPY), and euro (EUR) can be added, with more currencies added as needed.

The script then applies a for-in loop to generate currency options dynamically to the two dropdown menus in the HTML that are identified by ID "fromCurrency" and "toCurrency". The script creates two <option> elements for each currency in the exchangeRates object, with the text and the value of the option both set to the currency code. The options that appear in the relevant dropdown menus are then refreshed with these alternatives.

As well the script offers the function called convertCurrency() which is then called upon the French click of the HTML button. This feature acquires the user-selected amount, source currency, and target currency chosen. It checks if the amount entered is a valid number, and in case it is not, it asks the user to input one if it isn't, this being indicated by a warning message. In case the input is correct, the element with the given ID "result" of the HTML element gets the updated value, which shows the result of the conversion, rounded to two decimal places, after an amount is calculated using the given exchange rates formula.

Eventually, this JavaScript code creates a conversion method that generates a varying result according to user input. It dynamically loads currency options to bring it a user-friendly currency converter interface.

Using JavaScript to create a currency converter is a useful example of combining data, logic, and user interfaces. By including real-time conversion rates via an API, introducing new currencies, or enhancing the user experience, you may significantly improve this project. This straightforward example highlights the potential of JavaScript in web development and provides a basis for more intricate financial application development.

Next TopicJavaScript Equality Operators

← prev next →