Simple Currency Converter ( HTML & JavaScript )

Table of Contents

Here’s an example of a simple currency converter that uses JavaScript, HTML, and CSS, and also utilizes a free API to get the exchange rates:

HTML

				
					<!DOCTYPE html>
<html>
<head>
  <title>Currency Converter</title>
</head>
<body>
  <h1>Currency Converter</h1>
  <form>
    <label for="amount">Enter amount:</label>
    <input type="text" id="amount" name="amount"><br>
    <label for="from">From:</label>
    <select id="from" name="from">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="JPY">JPY</option>
    </select><br>
    <label for="to">To:</label>
    <select id="to" name="to">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="JPY">JPY</option>
    </select><br>
    <button type="button" onclick="convertCurrency()">Convert</button>
  </form>
  <p>Result: <span id="result"></span></p>
</body>
</html>
				
			

JAVASCRIPT

				
					<script>
    function convertCurrency() {
      // Get the input values
      const amount = document.getElementById('amount').value;
      const from = document.getElementById('from').value;
      const to = document.getElementById('to').value;
      
      // Make the API call
      fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
        .then(response => response.json())
        .then(data => {
          // Calculate the converted amount
          const rate = data.rates[to];
          const convertedAmount = rate * amount;
          
          // Update the result element
          document.getElementById('result').innerText = convertedAmount;
        });
    }
  </script>
				
			

This code will create a simple form with two currency dropdowns and a button to initiate the conversion. When the button is clicked, the convertCurrency function is called, which makes a request to the Exchange Rate API to get the exchange rate for the selected currencies. The function then calculates the converted amount and updates the result element on the page with the result.

You can customize this code by adding more currencies to the dropdown lists, or by using a different API to get the exchange rates.

CSS

				
					body {
  font-family: sans-serif;
}

h1 {
  text-align: center;
  margin: 20px 0;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  margin: 0 auto;
}

label {
  margin: 10px 0;
}

input[type="text"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button[type="button"] {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="button"]:hover {
  background-color: #45a049;
}

#result {
  font-weight: bold;
}

				
			

To use this CSS, you can add it to your HTML file inside a <style> element, or you can include it in a separate file and link to it in your HTML using a <link> element.

This CSS styles the body text, the heading, and the form elements to make them look more visually appealing. It also adds some hover effects to the button. You can customize the styles further to match your desired design.

SCREENSHOT

Simple Currency Converter Screenshot
END

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top