BigBinary Academy

Currency Convertor Project

Build a currency converter app using an API for real-time rates. Design a simple layout where users pick two currencies and enter an amount, then show the converted result instantly.

Max Chat

Task 1

Create a basic HTML structure

  1. An input field for the amount to be converted.

  2. A drop-down to select the "from" currency value.

  3. A second drop-down to select the "to" currency value.

  4. A convert button.

  5. A <p> tag to show the converted amount.

  6. A <p> tag to show any errors that might occur during the conversion process.

Task 2

Add CSS styling as per the design.

Task 3

Fetch the list of countries using the API endpoint provided.

Task 4

Display the currency list in dropdowns.

Task 5

Retrieve the conversion rate with the ExchangeRate API.

  • Visit ExchangeRate API Website and create an account.

  • After registration, you will receive an API key, which is a unique string that you will use to authenticate your requests.

  • Use the conversion API Endpoint https://v6.exchangerate-api.com/v6/<yourApiKey>/pair/<fromCurrency>/<toCurrency> to retrieve the conversion rate.

  • Replace <yourApiKey> with the API Key you generated in the first step.

  • Replace the <fromCurrency> and <toCurrency> with the user selected currency codes.

Task 6

Use the conversion rate received to implement the currency conversion functionality.

More Projects

These are some of the other projects you can build.

Password Generator Project
Password Generator

In this project, you'll make an application that creates strong passwords for the user. You will add features to control which characters are allowed in the password. Finally, you'll provide the user the ability to copy this password and use it.

Shopping Cart

In this project, you'll create a shopping cart webpage for a shoe store. You'll create the main dashboard where the shoes will be listed. You'll also create functionality for filtering and sorting the shoes. Finally, you'll add a shopping cart where the users can add the shoes of their choice and place an order.

Calculator Project
Calculator

In this project, you will build a calculator with all basic functionalities like addition, multiplication, division, and subtraction. With this, you'll get a good understanding of DOM manipulation, JavaScript logic & CSS design.

Chess Board Project
Chess Board

In this project, you'll style a Chess Board using HTML and CSS. You will create an 8x8 chessboard with alternating light and dark squares. You'll add icons for the chess pieces from the resource we provide below. Please ensure that you use only CSS Grid for this project. Avoid using CSS Flexbox.

Login Page Project
Login Page

In this project, you need to style a form that allows people to login to an application. This form will collect different user information like name, email and address.

Tic-Tac-Toe Project
Tic-Tac-Toe

In this project, you'll create the tic-tac-toe game. This is a two-player game. Player 1 will click on a cell to mark an 'X' in it. Player 2 will then click on a different cell to mark an 'O' in it. This will continue till a player gets three marks of the same kind in a row. The three consecutive marks can be horizontal, vertical or even diagonal. You'll create the layout of the game and handle the winning, losing or tie conditions.

View all projects
Made with NeetoSite