<h2>Currency Converter Using HTML, CSS, and JavaScript</h2>
In this tutorial, we will create a Currency Converter Website using HTML, CSS, and JavaScript. We will build and use this&nbsp;<a title="Currency Conversion API" href="https://currencyapi.com/" target="_blank" rel="noopener">Currency Conversion API</a> to gather the latest real-time conversion rates. The objective is to understand how HTML, CSS, and JavaScript can be used along with this currency converter API to build this website.
<h2>What you'll build?</h2>
By the end of this tutorial, you will build an app that will look something like this:
<video controls="controls" width="800" height="450">
 <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/final-app.mp4" type="video/mp4">
 Your browser does not support the video tag.</video>
<h3>Prerequisites</h3>
Visual Studio Code: I am using <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VS Code</a> to write code. You can choose the editor of your choice Live Server Extension: I will also use an Extension for VSCode which is called &ldquo;Live Server&rdquo;. The live server enables you to open an HTML document, and it runs a server for you and opens a browser window with live refresh making it convenient for you to see live changes while development. Currency Conversion API: <a title="free currency converter api" href="https://app.currencyapi.com/register?coupon_code=CODEWITHHARRY23" target="_blank" rel="noopener">This is the free API</a> we will be using to fetch currency details. If you plan to upgrade later, you can <a title="signup for currencyapi" href="https://app.currencyapi.com/register?coupon_code=CODEWITHHARRY23" target="_blank" rel="noopener">signup for an account here</a> for maximum discounts
<h3>Installing VS Code</h3>
Let&rsquo;s start by installing VS Code. Go to <a href="https://code.visualstudio.com/download" target="_blank" rel="noopener">https://code.visualstudio.com/download</a> to download VS Code from their official website.
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/download-vs-code.png" alt="cwh blog image" width="630"> Once, the download is complete, install VSCode by running the setup. Make sure to check all these options before installing.&nbsp; <img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/install-vscode.png" alt="cwh blog image" width="630"> Now, once you have installed VSCode, open VSCode and go to the Extensions Tab. <img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/vscode-extensions.png" alt="cwh blog image" width="630"> Here on the top search bar, search for &ldquo;Live Server&rdquo; and install this extension.&nbsp; <img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/live-server.png" alt="cwh blog image" width="630"> We are ready to create our project now.&nbsp;
<h3>Frontend of the Page</h3>
We will start by designing the frontend of our website. Let&rsquo;s add this HTML 5 Boilerplate and start the live server by right clicking anywhere on the editor and then choosing on the option &ldquo;Open with Live Server&rdquo;:
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;Currency Converter&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/open-live-server.png" alt="cwh blog image" width="630">
When you start the live server, your browser will automatically launch, and it will take you to http://127.0.0.1:5500/. If it doesn&rsquo;t, you can manually type this to the browser URL and go there.&nbsp; This is what you will see if you have used the above boilerplate. <img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/helloworld.png" alt="cwh blog image" width="630"> Let&rsquo;s add a navbar by using the &lt;nav&gt; class and a footer using the &lt;footer&gt; class as shown below:
<pre class="language-markup"><code>&lt;nav&gt;
 &lt;div class="logo"&gt;MyCurrencyConverter&lt;/div&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="/about"&gt;About Us&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;

&lt;h1&gt;Hello World!&lt;/h1&gt;

&lt;footer&gt;
 Copyright &amp;copy; All rights reserved
&lt;/footer&gt;</code></pre>
Note to Readers:&nbsp;You may notice links in the navigation bar like "/about" and "/contact." At present, these pages are placeholders and you can add these pages to your website if you wish to.
Now, we will start adding a form where we will take the desired information as form input and we will also add a button to submit the information.&nbsp;
<pre class="language-markup"><code> &lt;div class="container"&gt;
 &lt;h1&gt;Choose a currency to convert&lt;/h1&gt;
 &lt;form action="/action.php" method="get"&gt;
 &lt;label for="quantity"&gt;Choose a quantity: &lt;/label&gt;
 &lt;input type="number" name="quantity" min="1" max="10"&gt;
 &lt;label for="currency"&gt;Choose a currency: &lt;/label&gt;
 &lt;select name="currency"&gt;
 &lt;option value="INR"&gt;Indian Rupee&lt;/option&gt;
 &lt;option value="USD"&gt;US Dollar&lt;/option&gt;
 &lt;option value="EUR"&gt;Euro&lt;/option&gt;
 &lt;/select&gt;
 &lt;button class="btn" type="submit"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;</code></pre>
Now, all that&rsquo;s left is the output. We will add the output part and set its class as &ldquo;output&rdquo;. The output will have CSS "display:none" which will hide it until the data is fetched from the API
<pre class="language-markup"><code>&lt;div class="output"&gt;
 &lt;h2&gt;Here is your converted values in different currencies&lt;/h2&gt;
 &lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;Currency&lt;/th&gt;
 &lt;th&gt;Code&lt;/th&gt;
 &lt;th&gt;Value&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;

 &lt;/tbody&gt;
 &lt;/table&gt;
&lt;/div&gt;</code></pre>
This is how it will look like: <img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/no-css-app.png" alt="cwh blog image" width="630"> I know, it does not look good at all. Let&rsquo;s fix it by adding CSS styles to it.&nbsp;
<h3>Adding Styles</h3>
We have 3 methods to add CSS to our application.&nbsp;
<ol>
<li>Internal CSS</li>
<li>External CSS</li>
<li>Inline CSS</li>
</ol>
We will focus on adding internal css for now. You can later organize your CSS in an external stylesheet.
Let&rsquo;s go inside the &lt;head&gt; element and add our styles there.&nbsp; I have added the following styles:
<pre class="language-markup"><code>&lt;style&gt;
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,700;1,300&amp;family=Poppins:wght@400;600&amp;display=swap');

 * {
 margin: 0;
 padding: 0;
 }

 nav {
 font-family: 'Noto Sans', sans-serif;
 font-weight: 900;
 display: flex;
 font-size: 20px;
 background-color: rgb(224, 209, 245);
 padding: 23px;
 }

 nav li a {
 text-decoration: none;
 color: rgb(2, 3, 18);
 transition: all;
 transition-duration: 500ms;
 }

 nav li a:hover {
 text-decoration: none;
 color: rgb(103, 101, 235);
 }

 div.logo {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0 23px;
 font-size: 24px;
 }

 nav ul li {
 list-style: none;
 margin: 0 23px;
 }

 nav ul {
 display: flex;
 }

 .container {
 min-height: 100vh;
 font-family: 'Poppins', sans-serif;
 max-width: 80vw;
 margin: auto;
 }

 .container h1,
 h2 {
 margin: 23px 0;
 }

 .container form {
 display: flex;
 flex-direction: column;
 }

 .container form label {
 font-size: 25px;
 }

 .container form input[type='number'],
 select,
 label {
 font-size: 25px;
 width: 23vw;
 margin-bottom: 23px;
 }

 .btn {
 width: 144px;
 padding: 5px 8px;
 font-size: 20px;
 background: #e0d0f5;
 color: black;
 border-radius: 13px;
 cursor: pointer;
 }

 .output {
 display: none;
 }

 .output table {
 width: 50vw;
 text-align: center;
 border: 2px solid black;
 font-size: 20px;
 }

 .output table th{
 padding: 3px;
 }

 @media (max-width: 600px) {
 

 nav {
 flex-direction: column;
 font-size: 14px;
 }

 nav ul li {
 margin: 5px 13px;
 }

 nav ul {
 justify-content: center;
 }

 .container {
 max-width: 95vw;
 }

 .container form input[type='number'],
 select,
 label {
 width: 80vw;
 }
 }

 footer {
 font-family: 'Poppins', sans-serif;
 text-align: center;
 }
 &lt;/style&gt;</code></pre>
After adding all the relevant styles, this is how our webpage will look: <img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/with-css-app.png" alt="cwh blog image" width="630"> We are done with the frontend part. Now, we will start coding the logic where we will use an API to fetch and convert the currency
<h2>Writing the JavaScript Logic</h2>
We will use <a href="https://app.currencyapi.com/register?coupon_code=CODEWITHHARRY23">CurrencyAPI.com</a> for this application. <a href="https://app.currencyapi.com/register?coupon_code=CODEWITHHARRY23">CurrencyAPI.com</a> provides us with currency conversion API which is the perfect tool to handle our exchange rate conversions. <a href="https://app.currencyapi.com/register?coupon_code=CODEWITHHARRY23" target="_blank" rel="noopener">Create an account</a> and you can use the free plan as it gives us 1 API Key and 300 Free Requests. If you need it for a large-scale application, you can purchase a subscription to this API. You can use the code &ldquo;CODEWITHHARRY23&rdquo; to avail of a 20% discount at the time of checkout.&nbsp; Let&rsquo;s start by creating a new file called main.js and integrating it into our main page. We will add this line just below the footer.&nbsp;
<pre class="language-markup"><code>&lt;script src="main.js"&gt;&lt;/script&gt;</code></pre>
Now, in the main.js file we will add the following code:
<pre class="language-javascript"><code>const populate = async (value, currency) =&gt; {
 let myStr = ""
 url = "https://api.currencyapi.com/v3/latest?apikey=API+KEY+HERE&amp;base_currency=" + currency
 let response = await fetch(url)
 let rJson = await response.json()
 document.querySelector(".output").style.display = "block"

 for (let key of Object.keys(rJson["data"])) {
 myStr += ` &lt;tr&gt;
 &lt;td&gt;${key}&lt;/td&gt;
 &lt;td&gt;${rJson["data"][key]["code"]}&lt;/td&gt;
 &lt;td&gt;${Math.round(rJson["data"][key]["value"] * value)}&lt;/td&gt;
 &lt;/tr&gt; 
 `
 }
 const tableBody = document.querySelector("tbody");
 tableBody.innerHTML = myStr;

}
const btn = document.querySelector(".btn")
btn.addEventListener("click", (e) =&gt; {
 e.preventDefault()
 const value = parseInt(document.querySelector("input[name='quantity']").value);
 const currency = document.querySelector("select[name='currency']").value
 populate(value, currency)
})</code></pre>
 In this code, we've created a function named populate to establish a functional currency conversion web application. We've harnessed an external API to fetch the latest currency exchange rates. By considering what the user enters for the amount and the desired currency type, we perform calculations to determine the converted value.&nbsp; The populate() function takes two arguments: the value of the quantity input and the currency selected from the dropdown menu. The function first creates an empty string called myStr. Then, it loops through the data object in the JSON response, which contains the currency rates. For each currency, the function adds a new row to the myStr string with the currency name, code, and the value of the currency multiplied by the quantity. Once the loop is finished, the myStr string is set as the innerHTML of the tbody element. This will update the table with the new currency rates. The btn element is an HTML button that has an event listener attached to it. When the button is clicked, the populate() function is called with the value of the quantity input and the currency selected from the dropdown menu. This will update the table with the new currency rates. Make sure to change this line to your own API key. You can get your own API Key by logging in to your <a title="currency api dashboard" href="https://app.currencyapi.com/." target="_blank" rel="noopener">currencyapi.com account</a>
<pre class="language-javascript"><code> url = "https://api.currencyapi.com/v3/latest?apikey=API+KEY+HERE&amp;base_currency=" + currency</code></pre>
Now our application is finished. This is how the final product will look:
<video controls="controls" width="800" height="450">
 <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/build-currency-converter-html-css-javascript/final-app.mp4" type="video/mp4">
 Your browser does not support the video tag.</video>
<h2>Conclusion &amp; Github Link</h2>
With our application now fully operational, users can effortlessly convert currency by inputting the desired quantity and selecting the target currency. The table updates instantaneously, displaying the converted values for various currencies. This user-friendly interface streamlines the process of currency conversion and enhances financial decision-making. Here is the <a title="currency converter github link" href="https://github.com/CodeWithHarry/currency-converter-app" target="_blank" rel="noopener">Github link</a> for the project source code. Hope you learned something new. Happy Coding!

[Project] Create a Currency Converter: A Step-by-Step Guide Using HTML, CSS, and JavaScript

Add a new comment