Main FNL X
Main FNL X
INTRODUCTION
The Currency Converter Webpage project is designed to provide users with a
seamless and efficient tool for converting amounts between various
internationalcurrencies. This project leverages modern web technologies ,
including HTML, CSS and JavaScript , to create a user-friendly interface that
fetches real-time exchange rates from an external API and performs currency
conversions accurately. The primary objective of this project is to offer a reliable
and intuitive platformfor users, such as travelers, financial analysts and e-
commerce users, who needto convert currencies quickly and accurately. The
webpage features a clean andresponsive design , ensuring compatibility across
different devices , including desktops, tablets, and smartphones. The
methodology involves several key steps : requirement analysis , design,
development , API integration , testing , deployment , and maintenance. The
HTML structure provides the basic layout of the webpage, including input fields
for the amount and currency types, and a section to display the conversion result.
CSS is used to style the webpage, making it visually appealing and ensuring a
consistent look and feel. JavaScript handles the core functionality , including
fetching exchange rates from a reliable API and performing the conversion
calculations.The API integration is a crucial component, as it ensures that the
exchange ratesare up-to-date and accurate. The webpage fetches data from a
trusted currency conversion API , processes the data , and displays the converted
amount to the user. Error handling mechanisms are implemented to manage any
issues that may arise during the API requests.Testing is conducted across various
browsersand devices to ensure compatibility and performance. User feedback is
gatheredto make necessary adjustments and improvements.The webpage is then
deployed to a web server, making it accessible to users viaa domain name.
Regular maintenance is performed to update the API key, fix bugs, and ensure
compliance with the latest web standards.
1
1.1 OVERVIEW
Currency is a system of money used as a medium of exchange in a particular
country or region. It includes coins and banknotes that are issued by a government
or central bank.
Currency serves several key functions in an economy:
1.Medium of Exchange:
It facilitates the buying and selling of goods and services, making
trade more efficient than barter systems.
2.Unit of Account:
It provides a standard measure of value, allowing people to compare the
worth of different goods and services.
3.Store of Value:
It can be saved and retrieved in the future, maintaining its value over time.
4.Standard of Deferred Payment:
It is accepted for settling debts and future payments.
Currencies can be physical, like coins and banknotes, or digital, like
cryptocurrencies. Each country typically has its own currency, such as the US
Dollar (USD), Euro (EUR), Japanese Yen (JPY), and Indian Rupee (INR). The
value of a currency can fluctuate based on various factors, including economic
conditions, interest rates, and geopolitical events.Conversion, in a general sense,
refers to the process of changing or transforming something from one form, state,
or value to another. This concept can be applied in various contexts such as
currency , religious , data , unit , energy and other…
1.2 METHODS OF CONVERSION
Currency conversion can be performed using various methods, each suited to
different needs and contexts. Here are some common methods:
2
1.Manual Conversion:
Using a fixed exchange rate, you can manually calculate the converted
amount. This method is simple but can be inaccurate if the exchange rate
fluctuates.
2.Online Currency Converters:
Websites and apps provide real-time exchange rates and perform
conversions instantly. These tools are convenient and widely used for quick
conversions.
3.Bank Services:
Banks offer currency conversion services for their customers. They provide
reliable rates but may charge a fee for the service.
4.Foreign Exchange (Forex) Markets:
Forex markets allow for the trading of currencies. This method is used by
traders and investors to convert large amounts of money and speculate on
currency movements.
5.Currency Exchange Offices:
Physical locations where you can exchange cash for another currency.
These are commonly found in airports and tourist areas.
6.Credit Card Transactions:
When you make a purchase in a foreign currency, your credit card company
will convert the amount to your home currency. This method is convenient but
may include additional fees.
7.Automated Teller Machines (ATMs):
ATMs in foreign countries can dispense local currency from yourhome
bank account. The conversion is done automatically, often at competitive rates.
8.Mobile Payment Apps:
Apps like PayPal, Revolut, and others offer currency conversion features.
They provide real-time rates and are convenient for digital transactions.
3
1.3 SCOPE OF THE PROJECT
The scope of the currency converter webpage project encompasses the
development of a robust and user-friendly tool that provides real-time currency
conversion. The project will involve integrating reliable exchange rate APIs to
fetch the latest exchange rates and ensuring accurate conversions between various
currencies. The webpage will be designed to be responsive, ensuring
compatibility across different devices, including desktops, tablets, and
smartphones. Additionally, the project will include features such as error handling
for invalid inputs, historical exchange rate trends, and graphical representations
of exchange rate data. The application will cater to a wide range of users,
including travelers, business professionals, and individuals involved in
international financial transactions, providing them with up-to-date and precise
currency conversion information. The project will also focus on scalability,
allowing for the addition of new features and enhancements in the future.
4
CHAPTER 2
LITERATURE SURVEY
1.CURRENCY CONVERTER SYSTEM [1]
Author: Atuf Shaikh, Arham Momin, Mihir Jadhav, Rahul Patil 2021
This Android app helps users know about currency value updates regularly
with advanced features and functionality. It provides a web-based interface for
exchanging money from one currency to another. The app is designed to give
accurate exchange results using online information sources and is particularly
useful for travelers and traders.
Advantages:
1. Real-time currency updates
2. User-friendly interface
3. Accessibility for travelers
4. Advanced features
5. Accurate exchange results
Disadvantages:
1. Dependency on internet connection
2. API limitations
3. Security concerns
4. Maintenance requirements
5. Limited currency options
5
2. REAL-TIME CURRENCY [2]
Author: Bharti Nana Durgade, Bhakti Nitin Kadappa, Shreya Kiran Patil,
Nilkanth Maharudra Malapure
Abstract: This project involves developing a real-time currency converter
using Python. The application provides regular updates about each country's
currency, reflecting the current market value and conversion rate. It is designed
to be used by any user, especially those in business, shares, and finance-related
areas.
Advantages:
1. Real-time currency updates
2. User-friendly interface
3. Useful for business and finance
4. Regular updates
5. Accurate conversion rates
Disadvantages:
1. Dependency on internet connection
2. API limitations
3. Security concerns
4. Maintenance requirements
5. Limited currency options
6
3. CURRENCY CONVERTER [3]
Author: Gaurav Wagh
Abstract: This project involves creating a currency converter using Java,
specifically with Swing and AWT components. The application allows users to
convert currencies between different countries by fetching real-time exchange
rates. The project is developed using NetBeans IDE and Java version 13. It
supports conversion for currencies of almost nine countries and provides regular
updates on currency market values and conversion rates.
Advantages:
1. Real-time exchange rates
2. User-friendly interface
3. Cross-platform compatibility
4. Scalability
5. Educational value
Disadvantages:
1. Dependency on internet connection
2. API limitations
3. Security concerns
4. Maintenance requirements
5. Limited currency support
7
4. CURRENCY CONVERTER [4]
Author: Wagh Dhiraj Anil
Abstract: This project involves creating a currency converter using Java,
specifically with Swing and AWT components. The application allows users to
convert currencies between different countries by fetching real-time exchange
rates. The project is developed using NetBeans IDE and Java version 13. It
supports conversion for currencies of almost nine countries and provides regular
updates on currency market values and conversion rates.
Advantages:
1. Real-time exchange rates
2. User-friendly interface
3. Cross-platform compatibility
4. Scalability
5. Educational value
Disadvantages:
1. Dependency on internet connection
2. API limitations
3. Security concerns
4. Maintenance requirements
5. Limited currency support
8
CHAPTER 3
SYSTEM ANALYSIS
3.1 EXISTING SYSTEM
The existing systems for currency conversion typically involve a variety of
tools and applications, each with its own set of features and limitations. These
systems can be broadly categorized into manual conversion methods, standalone
applications, and integrated web-based solutions. The analysis of existing
systems highlights the need for a comprehensive, user-friendly, and reliable
currency converter webpage that addresses the limitations of current solutions.
By leveraging modern web technologies and integrating real-time exchange rate
APIs, the proposed system aims to provide accurate and efficient currency
conversions, catering to the needs of a diverse user base.
3.2 PROPOSED SYSTEM
The proposed system for the currency converter webpage aims to address
the limitations of existing solutions by providing a reliable, efficient, and user-
friendly tool for real-time currency conversion. The system will leverage modern
web technologies and integrate with reliable exchange rate APIs to ensure
accurate and up-to-date conversions. Here are the key components and features
of the proposed system. The proposed system for the currency converter webpage
aims to provide a comprehensive solution that addresses the limitations of
existing systems. By leveraging real-time exchange rate APIs, designing an
intuitive user interface, implementing robust error handling, ensuring cross-
platform compatibility, and focusing on scalability and security, the proposed
system will offer a reliable, efficient, and user-friendly tool for accurate currency
conversions.
9
CHAPTER 4
SYSTEM SPECIFICATION
4.1 HARDWARE SPECIFICATION
• BACKEND - JavaScript
• API - ExchangeRate-API
10
CHAPTER 5
SOFTWARE DESCRIPTION
11
Java is designed with security in mind, and includes features such as a
sandbox security model that restricts the operations that code can perform. Java
is sometimes criticized for its performance, particularly when compared to lower-
level languages like C or C++.
12
CHAPTER 6
SYSTEM DESCRIPTION
1.User Input:
The user enters the amount and selects the source and target
currencies on the webpage.
2.Client-Side Processing:
13
The webpage, built with HTML, CSS, and JavaScript, captures the user
input and prepares a request to fetch the exchange rate.
3.API Request:
The JavaScript code sends a request to a currency conversion API (e.g.,
ExchangeRate-API) to get the latest exchange rate for the selected currencies.
4.API Response:
The API processes the request and returns the current exchange ratein a
JSON format.
5.Client-Side Processing:
The JavaScript code parses the JSON response, calculates the converted
amount using the exchange rate, and updates the webpage with the result.
6.User Output:
The converted amount is displayed on the webpage to the user.
6.3 UML DIAGRAM
Unified Modeling Language (UML) diagrams are a standardized visual
language used to represent the design and structure of software systems. They
provide a way to visualize the architecture, components, and relationships within
a system, making it easier to understand, communicate, and document complex
software designs.
14
USE CASE DIAGRAM
15
SEQUENCE DIAGRAM
16
ACTIVITY DIAGRAM
17
COMPONENT DIAGRAM
18
CHAPTER 7
PROJECT DESCRIPTION
7.1 MODULES LIST
1.User Interface Module
2.Exchange Rate API Integration Module
3.Conversion Logic Module
4.Error Handling Module
5.Backend Module
6.testing Module
7.2 MODULE DESCRIPTION
1. User Interface Module:
• Description: This module handles the front-end design and user
interactions. It includes input fields for the amount, source currency, and
target currency, as well as buttons for initiating the conversion.
• Components: HTML, CSS, JavaScript
• Functionality: Ensures a user-friendly and responsive interface that works
across different devices.
2. Exchange Rate API Integration Module
• Description: This module is responsible for fetching real-time exchange
rates from a reliable API.
• Components: JavaScript (Fetch API or Axios)
• Functionality: Sends requests to the exchange rate API, retrieves the latest
rates, and handles any errors related to API calls.
3.Conversion Logic Module
• Description: This module performs the actual currency conversion
calculations.
• Components: JavaScript
19
• Functionality: Uses the fetched exchange rates to convert the input amount
from the source currency to the target currency.
4.Error Handling Module
• Description: This module manages errors that may occur during user input,
API calls, or conversion calculations.
• Components: JavaScript
• Functionality: Provides meaningful error messages to users and ensures the
application remains stable and reliable.
5.Backend Module
• Description: This module handles server-side logic and database
interactions.
• Components: Node.js, Python Flask, etc.
• Functionality: Manages user data, handles API requests, and ensures secure
and efficient data processing.
6.Testing Module
• Description: This module ensures the reliability and accuracy of the
application through comprehensive testing.
• Components: Testing frameworks (Jest, Mocha, etc.)
• Functionality: Includes unit tests, integration tests, and end-to-end tests to
validate the functionality of each module.
20
CHAPTER 8
TESTING
8.1 BLACKBOX TESTING
OBJECTIVE
To ensure that the currency converter functions correctly from the user's
perspective without examining the internal code structure.
TEST CASES
1.Input Validation
Test Case 1:
Enter valid currency codes (e.g., USD, EUR) and amounts.
Expected Result:
The converter should fetch the exchange rate and display the converted
amount.
Test Case 2:
Enter invalid currency codes (e.g., XYZ).
Expected Result:
The converter should display an error message indicating invalid currency
code.
Test Case 3:
Enter negative amounts.
Expected Result:
The converter should display an error message indicating invalid amount.
2.Exchange Rate Fetching
Test Case 4:
Ensure the converter fetches the latest exchange rates from a reliable
source.
Expected Result:
21
The exchange rate should be up-to-date and accurate.
3.Conversion Accuracy
Test Case 5:
Convert a known amount using a known exchange rate.
Expected Result:
The converted amount should be accurate based on the exchange rate.
4.User Interface
Test Case 6:
Check the responsiveness of the converter on different devices (e.g.,
desktop, mobile).
Expected Result:
The converter should be responsive and display correctly on all devices.
TOOLS
• Manual testing
• Automated testing tools (e.g., Selenium)
8.2 WHITEBOX TESTING
OBJECTIVE
To ensure that the internal code structure, logic, and implementation of the
currency converter are correct.
TEST CASES
1.Code Coverage
Test Case 1:
Ensure all functions and methods related to currency conversion are
covered by tests.
Expected Result:
All functions and methods should be tested.
2.Unit Testing
Test Case 2:
22
Test individual functions for fetching exchange rates.
Expected Result:
Functions should return accurate exchange rates.
Test Case 3:
Test individual functions for performing currency conversion.
Expected Result:
Functions should return accurate converted amounts.
3.Integration Testing
Test Case 4:
Test the integration between the exchange rate fetching module and the
conversion module.
Expected Result:
Modules should work seamlessly together.
4. Error Handling
Test Case 5:
Test how the converter handles errors (e.g., network issues, invalid inputs).
Expected Result:
The converter should handle errors gracefully and provide meaningful
error messages.
TOOLS
• Unit testing frameworks (e.g., JUnit, NUnit)
• Code coverage tools (e.g., JaCoCo, Cobertura)
• Integration testing tools (e.g., Postman)
23
CHAPTER 9
SYSTEM IMPLEMENTATION
9.1 RESULT AND DISCUSSION
The implementation of the currency converter webpage has successfully
addressed the primary objectives of providing real-time exchange rates and
accurate currency conversions. By integrating a reliable exchange rate API, the
system ensures that users receive the most up-to-date information for their
conversions. The user-friendly interface, designed with modern web
technologies, offers a seamless experience across various devices, making it
accessible to a wide range of users. Comprehensive testing, including both
blackbox and whitebox testing, has validated the system's reliability and
accuracy. The robust error handling mechanisms enhance the user experience by
providing clear guidance in case of issues. Overall, the currency converter
webpage is a reliable and efficient tool for anyone needing precise currency
conversions, and its scalability allows for future enhancements to meet evolving
user needs.
24
CHAPTER 10
CONCLUSION AND FUTURE ENHANCEMENT
10.1 CONCLUSION
In conclusion, the currency converter webpage project successfully
addresses the need for a reliable and efficient tool for real-time currency
conversion. By integrating a dependable exchange rate API, the system ensures
that users receive the most current and accurate exchange rates for their
conversions. The user-friendly interface, designed with modern web
technologies, provides a seamless experience across various devices, making it
accessible to a wide range of users. Comprehensive testing and robust error
handling mechanisms further enhance the system's reliability and user
experience. Overall, this project delivers a valuable tool for travelers, business
professionals, and anyone involved in international financial transactions,
offering precise and up-to-date currency conversion information.
10.2 FUTURE ENHANCEMENT
Enhancements can be made to the currency converter webpage to further
improve its functionality and user experience. One potential enhancement is the
addition of multi-language support, allowing users from different regions to
interact with the application in their preferred language. Another valuable feature
could be the integration of historical exchange rate data, enabling users to view
trends and make more informed decisions. Implementing a graphical
representation of exchange rate trends would also provide users with a visual
understanding of currency fluctuations. Additionally, an offline mode could be
developed to allow users to access the last fetched exchange rates even without
an internet connection. User authentication features could be added to save
conversion history and preferences, enhancing personalization. Finally,
developing a mobile app version of the currency converter would provide on-the-
25
go access, making it even more convenient for users. These enhancements would
not only improve the user experience but also expand the functionality of the
currency converter, making it an indispensable tool for users worldwide.
26
CHAPTER 11
APPENDIX
11.1 SOURCE CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Currency Converter</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&displ
ay=swap"
rel="stylesheet"
/>
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawe
[email protected]/css/fontawesome.min.css" integrity="sha384-
NvKbDTEnL+A8F/AA5Tc5kmMLSJHUO868P+lDtTpJIeQdGYaUIuLr4lVGO
EA1OcMy" crossorigin="anonymous">
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
<style>
body {
margin: 0;
background-color: #0e0d0d; /* Dark background */
display: flex;
27
height: 150vh; /* Full viewport height */
}
iframe {
border: none;
border-radius: 15%; /* Remove default border */
width: 80%; /* Set width to 80% of the parent */
height: 80%; /* Set height to 80% of the parent */
}
</style>
</head>
<body>
<div class="block glow"></div>
<div class="wrapper">
<div class="app-details">
<img src="/test.jpeg" width="250" height="200" class="bordered-
image" alt="Currency Converter" />
<h1 class="app-title">Currency Converter</h1>
</div>
<label for="amount">Amount:</label>
<input type="number" id="amount" value="1" />
<div class="dropdowns">
<select id="from-currency-select"></select>
<select id="to-currency-select"></select>
</div>
<button id="convert-button">Convert</button>
<p id="result"></p>
</div>
</div>
28
</section>
<!-- Script With Array Of Supported Country Codes -->
<script src="currency-codes.js"></script>
<!-- Script with API Key -->
<script src="api-key.js"></script>
<!-- Script -->
<script src="script.js"></script>
<iframe src='https://my.spline.design/robotfollowcursorforlandingpage-
c71b2fdeb397878e89e5ccd41f7e6f6d/' frameborder='0'></iframe>
</body>
</html>
JavaScript
letapi=https://v6.exchangerate-
api.com/v6/d63a9d12d451580f7fddd767/latest/USD;
const fromDropDown = document.getElementById("from-currency-select");
const to Drop Down = document.getElementById("to-currency-select");
//Create dropdown from the currencies array
currencies.forEach((currency) => {
const option = document.createElement("option");
option.value = currency;
option.text = currency;
fromDropDown.add(option);
});
//Repeat same thing for the other dropdown
currencies.forEach((currency) => {
const option = document.createElement("option");
option.value = currency;
option.text = currency;
toDropDown.add(option);
29
});
document
30
.querySelector("#convert-button")
.addEventListener("click", convertCurrency);
window.addEventListener("load", convertCurrency);
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
border: none;
outline: none;
}
body {
background-color: #080808;
}
.block{
position: relative;
margin: 7% auto 0;
width: 22%;
height: 670px;
background: linear-gradient(0deg , );
}
.glow::before, .glow::after {
content: ' ';
position: absolute;
left:70px ;
top: -20px;
background: linear-gradient(45deg , #e6fb04 , #ff6600, #00ff66, #00ffff , #ff00ff
, #ff0099 , #6e0dd0, #ff3300 , #099fff );
31
background-size: 700%;
width: calc(100% + 18px);
height: calc(100% + 18px);
z-index: -1;
animation: animate 20s linear infinite;
border-radius: 15px;
}
@keyframes animate{
0%{
background-position: 0 0;
}
50%{
background-position: 400% 0;
}
100%{
background-position: 0 0;
}
}
.glow::after{
filter:blur(40px);
opacity: 0.99;
}
.bordered-image {
border: 5px solid rgb(124, 38, 38);
border-radius: 10px;
}
.wrapper {
width: 80%;
max-width: 25em;
32
background-color: #f7f3f3;
position: absolute;
transform: translate(-50%, -50%);
left: 15%;
top: 50%;
padding: 2em;
border-radius: 0.8em;
}
.app-details {
display: flex;
align-items: center;
flex-direction: column;
}
.app-icon {
width: 9.37em;
border-radius: 10%;
}
.app-title {
font-size: 1.8em;
text-transform: uppercase;
margin-bottom: 1em;
}
label {
display: block;
font-weight: 600;
}
input#amount {
font-weight: 400;
font-size: 1.2em;
33
display: block;
width: 100%;
border-bottom: 2px solid #02002c;
color: #7a789d;
margin-bottom: 2em;
padding: 0.5em;
}
input#amount:focus {
color: #9873fe;
border-color: #5122d3;
}
.dropdowns {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
select {
width: 100%;
padding: 0.6em;
font-size: 1em;
border-radius: 0.2em;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("arrow-down.svg");
background-repeat: no-repeat;
background-position: right 15px top 50%, center;
background-size: 20px 20px;
34
background-color: #a541f2;
color: #fbf7f7;
}
select option {
background-color: #ffffff;
color: #02002c;
}
button {
font-size: 1em;
width: 100%;
background-color: #9873fe;
padding: 1em 0;
margin-top: 2em;
border-radius: 0.3em;
color: #ffffff;
font-weight: 600;
}
#result {
font-size: 1.2em;
text-align: center;
margin-top: 1em;
color: #02002c;
background-color: #e5dbff;
padding: 0.8em 0;
}
35
11.2 SCREENSHOTS
36
11.3 Conversion Performed (IND TO USD)
37
CHAPTER 12
REFERENCE
1. Author: Atuf Shaikh, Arham Momin, Mihir Jadhav, Rahul Patil Year: 2021
Title: Currency Converter System Institution: BVIT, Navi Mumbai. [1]
2. Author: Bharti Nana Durgade, Bhakti Nitin Kadappa, Shreya Kiran Patil,
Nilkanth Maharudra Malapure Year: 2021 Title: Real-Time Currency Converter
Institution: DKTE’s Yashwantrao Chavan Polytechnic, Ichalkaranji [2]
3. Author: Gaurav Wagh Year: 2021 Title: Currency Converter Institution:
Sanjivani College of Engineering, Kopargaon [3]
4. Author: Wagh Dhiraj Anil Year: 2022 Title: Currency Converter Institution:
Sanjivani College of Engineering, Kopargaon [4]
38