Learn JavaScript with Jad Joubran Workshop 2024

Create a Currency Converter using the Exchange-Rate API in JavaScript

Live workshop with Jad Joubran in collaboration with intechgration.io.

Project: CurrencyPro Converter

Prerequisites

• Create a free API key at exchangerate-api.com. The API key that will be generated for you, will be a string in the following format: 45e31c9a2a1b6b0b8d6e1c2x

  • Spend some time studying the Documentation for the Pair ExchangeRate-API endpoint and Authentication.
  • Once you have your API key, do a test request directly through the browser and check that you get the appropriate response back: https://v6.exchangerate-api.com/v6/45e31c9a2a1b6b0b8d6e1c2x/latest/USD

• Fork this repository

• Study the Figma Designs and try to recreate them from scratch using HTML. In case you want to focus just on the JavaScript part, we have already included two HTML pages that can be used as a boilerplate. Check the /html/ folder.

Assets

Here is what you will find in this repository:

• /assets/figma/

  • Figma design for Beginner level: Figma.Beginner.png
  • Figma design for Advanced level: Figma.Advanced.png

• /html/ (generated by ChatGPT-4o)

  • Basic HTML page for the landing page: /beginner/home.html
  • Basic HTML page for converter page: /beginner/converter.html

Communication

Please follow, like and subscribe to support our work:

• Jad Joubran

• Jad Joubran on YouTube

• Jad Joubran on GitHub

• intechgration.io

• WDX180 by intechgration.io

• intechgration.io on YouTube

• intechgration.io on GitHub

References & Resources

During the live session, Jad used quite a lot of Web APIs and JavaScript commands and also visited a few websites that helped him develop the app. He also mentioned a couple of tools and APIs that were not used. Here is a list of resources that cover all of these:

• JavaScript Modules: related to <script type="module">

• The Fetch API

• Web Accessibility: Something that the ChatGPT did not do very well on, when creating the HTML templates.

• The optional chaining JS operator

• JavaScript Template Literals (aka backticks)

• NodeList: A special kind of array returned by document.querySelectorAll method.

• The URL API: "The URL interface is used to parse, construct, normalize, and encode URLs."

• The data attribute: Used in the <div data-value="USD"> elements.

  • CodeToGo reference

• The popover HTML attribute

• The inert HTML attribute

• The Chrome DevTools $0 shortcut

• Do modules prevent the need to use the DOMContentLoaded listener?: brought up by a question.

• Vite: JavaScript Frontend development tool.

• The History Web API

• The debugger JS keyword

• CodeToGo: Find up to date snippets for JavaScript & React use cases

• https://http.cat/

• W3C HTML Validator