{"id":1069,"date":"2024-07-05T06:13:38","date_gmt":"2024-07-05T06:13:38","guid":{"rendered":"https:\/\/www.devopsconsulting.in\/blog\/?p=1069"},"modified":"2024-07-06T06:00:25","modified_gmt":"2024-07-06T06:00:25","slug":"step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/","title":{"rendered":"Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg\" alt=\"\" class=\"wp-image-1071\" style=\"width:724px;height:auto\" srcset=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg 1024w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1-300x300.jpg 300w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1-150x150.jpg 150w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1-768x768.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Creating a currency converter app using HTML, CSS, and JavaScript involves building a simple web page that interacts with a currency conversion API to fetch exchange rates. Here&#8217;s a step-by-step guide to help you create a basic currency converter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Set Up the HTML<\/h3>\n\n\n\n<p>Create an HTML file (<code>index.html<\/code>) to define the structure of the app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Currency Converter&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"styles.css\">\n&lt;\/head>\n&lt;body>\n &lt;div class=\"container\">\n        &lt;h1>Currency Converter&lt;\/h1>\n        &lt;div class=\"converter\">\n            &lt;div class=\"input-group\">\n                &lt;input type=\"number\" id=\"amount\" placeholder=\"Enter amount\" \/>\n                &lt;select id=\"from-currency\">\n                    &lt;!-- Options will be populated by JavaScript -->\n                &lt;\/select>\n            &lt;\/div>\n            &lt;div class=\"input-group\">\n                &lt;select id=\"to-currency\">\n                    &lt;!-- Options will be populated by JavaScript -->\n                &lt;\/select>\n                &lt;input type=\"text\" id=\"result\" placeholder=\"Converted amount\" readonly \/>\n            &lt;\/div>\n            &lt;button id=\"convert\">Convert&lt;\/button>\n        &lt;\/div>\n    &lt;\/div>\n    &lt;script src=\"script.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Style the App with CSS<\/h3>\n\n\n\n<p>Create a CSS file (<code>styles.css<\/code>) to style the app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\tbody {\n    font-family: Arial, sans-serif;\n    background-color: #f4f4f4;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n}\n\n.container {\n    background-color: white;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    text-align: center;\n}\n\nh1 {\n    margin-bottom: 20px;\n}\n\n.converter {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n}\n\n.input-group {\n    display: flex;\n    gap: 10px;\n    justify-content: center;\n}\n\ninput, select {\n    padding: 10px;\n    border-radius: 5px;\n    border: 1px solid #ddd;\n    font-size: 16px;\n}\n\nbutton {\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    background-color: #007BFF;\n    color: white;\n    font-size: 16px;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: #0056b3;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add the JavaScript Logic<\/h3>\n\n\n\n<p>Create a JavaScript file (<code>script.js<\/code>) to handle the logic for fetching exchange rates and performing the conversion.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener('DOMContentLoaded', () => {\n    const amountInput = document.getElementById('amount');\n    const fromCurrency = document.getElementById('from-currency');\n    const toCurrency = document.getElementById('to-currency');\n    const resultInput = document.getElementById('result');\n    const convertButton = document.getElementById('convert');\n\n    \/\/ Replace with your own API key from exchangerate-api.com\n    const API_KEY = 'Your_api_key';\n    const API_URL = `https:\/\/v6.exchangerate-api.com\/v6\/${API_KEY}\/latest\/USD`;\n\n    fetch(API_URL)\n        .then(response => response.json())\n        .then(data => {\n            const currencies = Object.keys(data.conversion_rates);\n            currencies.forEach(currency => {\n                const option1 = document.createElement('option');\n                const option2 = document.createElement('option');\n                option1.value = currency;\n                option2.value = currency;\n                option1.textContent = currency;\n                option2.textContent = currency;\n                fromCurrency.appendChild(option1);\n                toCurrency.appendChild(option2);\n            });\n        })\n        .catch(error => console.error('Error fetching exchange rates:', error));\n\n    convertButton.addEventListener('click', () => {\n        const amount = parseFloat(amountInput.value);\n        const from = fromCurrency.value;\n        const to = toCurrency.value;\n\n        if (isNaN(amount)) {\n            alert('Please enter a valid amount');\n            return;\n        }\n\n        fetch(`https:\/\/v6.exchangerate-api.com\/v6\/${API_KEY}\/latest\/${from}`)\n            .then(response => response.json())\n            .then(data => {\n                const rate = data.conversion_rates&#91;to];\n                const convertedAmount = (amount * rate).toFixed(2);\n                resultInput.value = `${convertedAmount} ${to}`;\n            })\n            .catch(error => console.error('Error fetching conversion rate:', error));\n    });\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Obtain an API Key<\/h3>\n\n\n\n<p>Sign up for an API key from a currency conversion API provider, such as <a href=\"https:\/\/www.exchangerate-api.com\/\">ExchangeRate-API<\/a> or <a href=\"https:\/\/openexchangerates.org\/\">Open Exchange Rates<\/a>.<\/p>\n\n\n\n<p>Replace <code>YOUR_API_KEY_HERE<\/code> in the JavaScript file with your actual API key.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Run Your App<\/h3>\n\n\n\n<p>Open the <code>index.html<\/code> file in your web browser to see the currency converter in action.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"863\" height=\"357\" src=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/image.png\" alt=\"\" class=\"wp-image-1070\" style=\"width:877px;height:auto\" srcset=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/image.png 863w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/image-300x124.png 300w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/image-768x318.png 768w\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>This simple currency converter app built with HTML, CSS, and JavaScript allows users to input an amount and select currencies to convert between. You can enhance this app by adding more features such as historical data, a more sophisticated user interface, or additional currency information.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a currency converter app using HTML, CSS, and JavaScript involves building a simple web page that interacts with a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[172,86],"tags":[215,216,223,220,227,228,218,221,217,224,226,225,222,219],"class_list":["post-1069","post","type-post","status-publish","format-standard","hentry","category-html","category-javascript","tag-build-currency-converter","tag-create-currency-converter","tag-currency-conversion-app","tag-currency-converter-app","tag-frontend-project","tag-html-css-javascript-example","tag-html-css-javascript-project","tag-html-css-javascript-tutorial","tag-javascript-currency-converter","tag-javascript-fetch-api","tag-javascript-project-for-beginners","tag-simple-currency-converter","tag-web-app-development","tag-web-development-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript - DevOps Consulting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript - DevOps Consulting\" \/>\n<meta property=\"og:description\" content=\"Creating a currency converter app using HTML, CSS, and JavaScript involves building a simple web page that interacts with a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T06:13:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-06T06:00:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/\",\"url\":\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/\",\"name\":\"Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript - DevOps Consulting\",\"isPartOf\":{\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg\",\"datePublished\":\"2024-07-05T06:13:38+00:00\",\"dateModified\":\"2024-07-06T06:00:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/#primaryimage\",\"url\":\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg\",\"contentUrl\":\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg\",\"width\":1024,\"height\":1024},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/#website\",\"url\":\"https:\/\/www.devopsconsulting.in\/blog\/\",\"name\":\"DevOps Consulting\",\"description\":\"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.devopsconsulting.in\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.\",\"url\":\"https:\/\/www.devopsconsulting.in\/blog\/author\/abhishek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript - DevOps Consulting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript - DevOps Consulting","og_description":"Creating a currency converter app using HTML, CSS, and JavaScript involves building a simple web page that interacts with a [&hellip;]","og_url":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/","og_site_name":"DevOps Consulting","article_published_time":"2024-07-05T06:13:38+00:00","article_modified_time":"2024-07-06T06:00:25+00:00","og_image":[{"url":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg","type":"","width":"","height":""}],"author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/","url":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/","name":"Step-by-Step Tutorial: Currency Converter App with HTML, CSS, and JavaScript - DevOps Consulting","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg","datePublished":"2024-07-05T06:13:38+00:00","dateModified":"2024-07-06T06:00:25+00:00","author":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopsconsulting.in\/blog\/step-by-step-tutorial-currency-converter-app-with-html-css-and-javascript\/#primaryimage","url":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg","contentUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2024\/07\/OIG1.jpg","width":1024,"height":1024},{"@type":"WebSite","@id":"https:\/\/www.devopsconsulting.in\/blog\/#website","url":"https:\/\/www.devopsconsulting.in\/blog\/","name":"DevOps Consulting","description":"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopsconsulting.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","caption":"Abhishek Singh"},"description":"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.","url":"https:\/\/www.devopsconsulting.in\/blog\/author\/abhishek\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/1069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/comments?post=1069"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions"}],"predecessor-version":[{"id":1085,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions\/1085"}],"wp:attachment":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/media?parent=1069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/categories?post=1069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/tags?post=1069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}