Create a Foreign money Converter with HTML, CSS, and Vanilla JavaScript

[ad_1]

Let’s create an absolutely useful foreign money converter utility the use of HTML, CSS, and vanilla JavaScript. By means of the top of this educational, we can have a responsive foreign money app that fetches real-time knowledge with the Trade Charge API and gifts it in a user-friendly interface.

HTML Construction

Our foreign money utility may have a easy interface containing :

An enter box for the volume to be transformed.

A drop-down to make a choice the from Foreign money worth

A 2nd drop-down to make a choice the to foreign money worth

A convert button

A <p> tag to turn the transformed quantity

A <p> tag to turn any mistakes that would possibly happen all through the conversion procedure.

The HTML code will appear to be this:

<div elegance="container">

  <div elegance="currency-container">
    <h1>Foreign money converter</h1>
    <div elegance="input-box">
      <label for="quantity">Input quantity</label>
      <enter sort="textual content" identity="quantity" placeholder="100"  required/>
    </div>
    <div elegance="foreign money">
      <div elegance="field">
        <choose
          elegance="select-option"
          title="from-currency"
          identity="fromCurrency"
        >
          <possibility worth="USD">United States Buck</possibility>
        </choose>
      </div>
      <div>
        <span>TO</span>
      </div>
      <div elegance="field">
        <choose elegance="select-option" title="to-currency" identity="toCurrency">
          <possibility worth="USD">United States Buck</possibility>
        </choose>
      </div>
      <button elegance="convert">Convert</button>
      <p elegance="end result"></p>
      <p elegance="error"></p>

    </div>
  </div>
</div>

Recently, we’re the use of the choice worth as a placeholder. We can exchange and upload extra possibility knowledge dynamically with JavaScript.

Styling With CSS

Let’s get started with some elementary types. We’ve pulled within the somewhat superb Bricolage Ugly font from Google fonts too:

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Bricolage Ugly', sans-serif;
      }

      h1 {
        font-size: 5em;
        font-weight: daring;
        text-align: heart;
        margin: .5em 0;
        line-height: .8;
      }

      .container {
        margin: auto;
        min-height: 100vh;
        background-color: #202020;
        padding: 2em 0;
        colour: #040203;
        show: flex;
        flex-direction: column;
        align-items: heart;
        justify-content: heart;
      }

      .currency-container {
        peak: fit-content;
        background-color: #7cb889;
        padding: 3em;
        border-radius: 40px;
      }

For the enter and label (together with the placeholder within the enter) they are going to have the next types:

      .input-box {
        show: flex;
        flex-direction: column;
        align-items: heart;
        justify-content: heart;
        text-align: heart;
      }

      label {
        font-size: 1.5em;
        margin-bottom: .4em;
      }

      #quantity {
        width: 300px;
        padding: 20px;
        border-radius: 30px;
        font-size: 3em;
        border: 3px cast black;
        background: clear;
        colour: black;
        
      }
      #quantity:center of attention {
        border: 3px cast white;
        define: none;
      }

      ::placeholder {
        colour: rgba(0,0,0,0.6);
        opacity: 1; /* Firefox */
      }

Subsequent, we can observe styling to the field parts containing the From and To foreign money drop-downs. The drop-down parts will probably be organized in a column structure the use of Flexbox and focused vertically and horizontally. We actually have a hole between the field parts, some padding, and a border radius.

      .foreign money {
        margin-top: 50px;
        padding: 20px 20px;
        show: flex;
        align-items: heart;
        justify-content: heart;
        flex-direction: column;
        hole: 1.5rem;
      }

      .field {
        show: flex;
        align-items: heart;
        justify-content: heart;
      }

The select-option may have the next types

      .select-option {
        font-size: 16px;
        colour: #333;
        padding: 20px;
        show: block;
        font-weight: 700;
        line-height: 1.3;
        width: 100%;
        max-width: 100%;
        margin: 0;
        define: none;
        border-radius: 20px;
        border: 3px cast black;
      }

In the end, the convert button, the end result, and the mistake message parts may have the next types:

      button {
        width: 100%;
        peak: 100px;
        padding: 10px;
        border-radius: 30px;
        border: none;
        font-size: 1.5em;
        align-items: heart;
        background-color: black;
        colour: #fff;
        margin-top: 30px;
      }
      .end result {
        colour: black;
        font-size: 2.5em;
      }
      .error {
        colour: #800020;
        font-size: 12px;
      }

JavaScript Capability

The JavaScript capability may have two portions:

Getting the foreign money code, foreign money title, and flag from the REST nations API

getting conversion charge from the Trade Charge API

REST International locations API

The REST nations API supplies an API with the endpoint https://restcountries.com/v3.1/all the place you’ll filter out effects through offering the fields you have an interest in. In our case, we would like the rustic flag, foreign money title, and foreign money code and the endpoint will appear to be this:

1	https://restcountries.com/v3.1/all?fields=currencies,flag

The ensuing pattern knowledge will appear to be this:

{
    "title": {
      "commonplace": "Eritrea",
      "professional": "State of Eritrea",
      "nativeName": {
        "ara": {
          "professional": "دولة إرتريا",
          "commonplace": "إرتريا‎"
        },
        "eng": {
          "professional": "State of Eritrea",
          "commonplace": "Eritrea"
        },
        "tir": {
          "professional": "ሃገረ ኤርትራ",
          "commonplace": "ኤርትራ"
        }
      }
    },
    "currencies": {
      "ERN": {
        "title": "Eritrean nakfa",
        "image": "Nfk"
      }
    },
    "flag": "🇪🇷"
  },

To enable you to show our currencies, we can fetch the information and retailer it in a JavaScript record. The script for fetching the information will appear to be this:

const url =
  "https://restcountries.com/v3.1/all?fields=title,currencies,flag";
fetch(url)
  .then((reaction) => reaction.json())
  .then((knowledge) => {
    
    const end result = [];
    knowledge.forEach((nation) => {
      if (Object.keys(nation.currencies).duration >0) {
        end result.push({
          countryname: nation.title.commonplace,
          title: Object.values(nation.currencies)[0].title,
          code: Object.keys(nation.currencies)[0],
          flag: nation.flag,
        });
      }
    });

    end result.kind((a, b) => a.code.localeCompare(b.code));
    const jsonString = JSON.stringify(end result, null);
    console.log(jsonString);

  });

The code above does the next:

We use the fetch() approach to make an HTTP request to the REST nations API.

Then, we convert the reaction to JSON layout and get started processing the information.

From the reaction JSON, we first take a look at if each and every nation has a foreign money code since no longer all nations have a foreign money code.

If a rustic has a foreign money, we create an object with its title, code, and foreign money title and push it to the empty end result array.

Then we kind the foreign money code alphabetically.

In the end, we convert the end result to JSON and print the stringified knowledge to the console.

Whilst you run the script in a browser atmosphere, you must be capable of replica the information for your JavaScript record. The knowledge seems like this:

Create a Foreign money Converter with HTML, CSS, and Vanilla JavaScript

On the other hand, upload this hyperlink for your script the use of the src characteristic.

Subsequent, let’s get the choose parts.

1	let fromCurrency = report.getElementById("fromCurrency");
2	let toCurrency = report.getElementById("toCurrency");

Since we have now the information in an array, it’s now more straightforward to append the currencies to the choice parts of the fromCurrency and toCurrency choose parts.

Create a serve as referred to as addCurrency(). Within the addCurrency() serve as, we use the forEach() serve as to loop during the currencies array; for each and every iteration, we wish to upload the foreign money code to the choice part and append the choice part to each the choose parts.

 const end result = currencies.forEach((foreign money) => {

    const optionFrom = report.createElement("possibility");
    optionFrom.classList.upload("select-option");
    optionFrom.worth = foreign money.code;
    if (foreign money.code === "USD") {
      optionFrom.decided on = true;
    }
    optionFrom.textual content =`${foreign money.flag} ${foreign money.code} - ${foreign money.title}`;

    fromCurrency.appendChild(optionFrom);

    const optionTO = report.createElement("possibility");
    optionTO.classList.upload("select-option");
    optionTO.worth = foreign money.code;
    if (foreign money.code === "EUR") {
      optionTO.decided on = true;
    }
    optionTO.textual content =`${foreign money.flag} ${foreign money.code} - ${foreign money.title}`;
    toCurrency.appendChild(optionTO);
  });

Within the code above, we use the ForEach() serve as to iterate on each and every the currencies array knowledge and do the next:

Extracts the foreign money key from the currencies array for each and every foreign money

will get the flag

will get the foreign money title

Creates an HTML possibility part for the “fromCurrency” choose dropdown .

units the choice worth to the foreign money code

Units the choice textual content to a mixture of the flag, the foreign money title, and the foreign money code

Appends the created possibility part to the “fromCurrency” choose dropdown.

Creates an alternative choice part for the “toCurrency” choose dropdown with the similar knowledge because the fromCurrency

Appends the created possibility part to the “toCurrency” choose dropdown.

In the end we invoke the addCurrency() serve as to use the capability.

The choice worth would be the foreign money code, and the choice textual content would be the foreign money flag, foreign money code, and foreign money title separated through a hyphen.

We additionally set the default foreign money within the fromCurrency possibility part to USD and the default foreign money for the toCurrency possibility part to EUR.

Now our drop down are appearing the currencies.

Code Refactoring

From the addCurrency() serve as you’ll see that we’re repeating the similar code so as to add the choice values. Let’s create some other serve as for producing the choices for each and every foreign money part.

The serve as will appear to be this:

serve as createOption(nation, defaultCode, part ){
    // console.log(nation);
    const possibility = report.createElement("possibility");
    possibility.classList.upload("select-option");
    possibility.worth = nation.code;
    if (nation.code === defaultCode) {
      possibility.decided on = true;
    }
    possibility.textual content = `${nation.flag} ${nation.code} - ${nation.title}`;
    part.appendChild(possibility);


}

The createOption() serve as takes 3 parameters: the rustic object, the default code, and the part the place the choices will probably be appended.

Subsequent, replace the addCurrency() serve as as follows:

serve as addCurrency() {
  const end result = nations.map((nation) => {
      createOption(nation, "USD", fromCurrency );
      createOption(nation, "EUR", toCurrency )

  });
}

The serve as is now more straightforward to learn since we don’t have any repetitive code.

Foreign money Conversion

We can use the ExchangeRate API for foreign money conversion. The ExchangeRate API supplies foreign money conversion charges for 161 currencies.

The API lets in builders to transform currencies through offering a couple of foreign money codes within the request. For instance, if you wish to convert USD to EUR, your API name will appear to be this:

1	https://v6.exchangerate-api.com/v6/24faec6b42da4a96ceea41d3/pair/USD/EUR

The endpoint will give us the next end result.

{
  "end result": "luck",
  "documentation": "https://www.exchangerate-api.com/medical doctors",
  "terms_of_use": "https://www.exchangerate-api.com/phrases",
  "time_last_update_unix": 1703721602,
  "time_last_update_utc": "Thu, 28 Dec 2023 00:00:02 +0000",
  "time_next_update_unix": 1703808002,
  "time_next_update_utc": "Fri, 29 Dec 2023 00:00:02 +0000",
  "base_code": "USD",
  "target_code": "EUR",
  "conversion_rate": 0.9015
}

Since we have already got the codes in our choose choices, we can cross the values within the API and multiply the conversion charge through the volume to get the end result.

Create a serve as referred to as convertCurrency() serve as. Within the serve as:

get the show part

get the values from the chosen choices

Retailer the url in a variable.

const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;
const fromCurrrencyCode = report.getElementById("fromCurrency").worth;
const toCurrencyCode = report.getElementById("toCurrency").worth;
const end result = report.querySelector(".end result");
const error = report.querySelector(".error");

Be sure you provide your API key from the Trade Charge API. You’ll be able to download one totally free right here.

Within the convertCurrency() serve as, we first take a look at if a sound quantity has been entered, and if true, we carry out a GET request to the change charge API with the foreign money pairs.

The reaction will comprise the conversion charge. In the end we replace the end result with a formatted transformed quantity

serve as convertCurrency() {
  const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;

  const fromCurrrencyCode = report.getElementById("fromCurrency").worth;
  const toCurrencyCode = report.getElementById("toCurrency").worth;
  const end result = report.querySelector(".end result");
  const error = report.querySelector(".error");

  console.log(fromCurrrencyCode);
  console.log(toCurrencyCode);

  const quantity = enter.worth;

  if (quantity !== "" && parseFloat(quantity) >= 1) {
    const url = `${BASE_URL}/pair/${fromCurrrencyCode}/${toCurrencyCode}`;
    console.log(url);
    fetch(url)
      .then((resp) => resp.json())
      .then((knowledge) => {
        console.log(knowledge.conversion_rate);

        const conversionResult = (quantity * knowledge.conversion_rate).toFixed(
          2
        );
        const formattedResult = conversionResult.exchange(
          /B(?=(d{3})+(?!d))/g,
          ","
        );

        end result.innerHTML = `${quantity} ${fromCurrrencyCode} = ${formattedResult} ${toCurrencyCode}`;
        quantity.innerHTML = " ";
      })
      .catch(() => {
        error.textContent = "An error occured, please check out once more later ";
      });
  } else {
    alert("Please input an quantity");
  }
}

If an error happens, we show a message to the consumer, permitting them to know one thing went incorrect.

For the conversion to paintings, let’s upload an tournament listener to the convert button and invoke the convertCurrency() serve as, as proven under.

1	const convertBtn = report.querySelector(".convert");
2	convertBtn.addEventListener("click on", () => {
3	convertCurrency();
4	});

Ultimate Consequence

This is the general end result!

<br />

Conclusion

This educational has coated the best way to construct a foreign money converter that fetches real-time knowledge from the Trade Charge API. Be sure you get your unfastened API key from the ExchangeRateAPI, and feature a laugh construction issues!

[ad_2]