CURRENCY CONVENTOR

Report submitted as part of the assignment of 3rd year

of the Degree of Bachelor of Science

By

Sabhyata - 222811390019

Shipra Bhatnagar - 222811390021

MAA SHAKUMBHARI
UNIVERSITY

Department of Computer Science

Disha Bharti College of Management & Education

2024-2025

1
 CERTIFICATE

This is to certify that the project titled "CURRENCY CONVERTED" is

the authentic work of Sabhyata and Shipra Bhatnagar enrolled as a
Bachelor of Science students at the Disha Bharti College of Management
& Education Undertaken during the academic year 2024-25 as part of their
third -year coursework, this project showcases their early dedication and
academic prowess.
The completion of this project in the 2024-25 session stands as a testament
to the student's commitment and serves as a significant achievement,
contributing to the partial fulfilment of the degree requirements. We
confirm that this project has not been previously submitted for the award of
any degree, diploma, fellowship, or similar title, underscoring its uniqueness
and originality.

Mrs. Akansha Bhutani

(Assistant Professor)

Disha Bharti College of Management & Education , Saharanpur

Dr. Gaurav Aggarwal

(Director)

2
 CANDIDATE'S DECLARATION

We hereby certify that the work presented in the report entitled

“CURRENCY COVENTOR” is our unique work carried out during the
period of our 6th sem from Feb, 2025 to June, 2025 under the supervision of
Mrs. Akansha Bhutani , Assistant Professors, Department of Computer
Science , Disha Bharti College of Management & Education ,
Saharanpur

SABHYATA
SHIPRA BHATNAGAR

3
 ACKNOWLEGEMENT

I would like to express my sincere gratitude to all those who have contributed to the
successful completion of this project. Without their support, guidance, and
encouragement, this endeavour would not have been possible.

I extend my heartfelt thanks to our mentor for their invaluable supervision and mentorship
throughout the project. Their expertise and insights were instrumental in shaping the
direction of the work and ensuring its quality.

I am deeply appreciative of the collaborative efforts of my project team. Each member

played a crucial role in bringing diverse skills and perspectives to the table, contributing
to a dynamic and effective working environment.

Special thanks go to I nurture for providing the necessary resources and facilities that
facilitated the smooth progress of the project. The support received from the university
was indispensable in overcoming challenges and meeting project milestones.

Finally, my sincere thanks to my friends and family for their unwavering encouragement
and understanding during the demanding phases of the project. Their support provided
the emotional strength needed to persevere.

This project has been a rewarding journey, and I am grateful to everyone who played a
part, no matter how big or small, in its successful completion.

Thank you.

Sabhyata (222811390019)

Shipra Bhatnagar (222811390021)

B.Sc(CS)

4
 TABLE OF CONTENT

CHAPTER 1 INTRODUCTION

1.1 Purpose of the Report

1.2 Overview of Currency Converter

1.3 Technologies Used

CHAPTER 2 HTML STRUCTURE

2.1 Basic HTML Document Setup
2.2 Creating Containers for Input Fields and Output
2.3 Adding Button for Conversion

CHAPTER 3 CSS STYLING

3.1 Linking CSS File to HTML
3.2 Styling Input Fields and Button
3.3 Customizing the Layout and Visual Elements

CHAPTER 4 JavaScript FUNCTIONALITY

4.1 Introduction to JavaScript
4.2 Retrieving Exchange Rates
4.3 Calculating Currency Conversion
4.4 Displaying Conversion Result
4.5 Handling User Interactions
CHAPTER 5 INTEGRATION OF EXCHANGE RATE API
5.1 Exploring Exchange Rate APIs
5.2 Making API Requests
5.3 Parsing API Response
5.4 Updating Exchange Rates
CHAPTER 6 ⁠ADVANCE FEATURES
6.1 Real-time Exchange Rate Updates
6.2 Adding Currency Symbols
6.3 Implementing Decimal Precision
6.4 Enhancing User Experience

5
CHAPTER 7 TESTING AND DEBUGGING
7.1 Validating User Inputs
7.2 Error Handling
7.3 Cross-browser Compatibility
CHAPTER 8 ⁠DEPLOYMENT AND HOSTING

8.1 Preparing Files for Deployment

8.2 Choosing a Web Hosting Service
8.3 Uploading and Configuring the Application
CHAPTER 9 CONCLUSION
9.1 Summary of Achievements
9.2 Future Enhancements and Possibilities
CHAPTER 10 REFERENCE

6
 ABSTRACT

The rapid globalization of economies has significantly increased the need for seamless
currency exchange solutions. This project, titled "Currency Converter", presents a web-
based application developed using HTML, CSS, and JavaScript to provide users with an
efficient, accurate, and user-friendly platform for converting one currency into another in
real-time.
The core functionality of the application relies on integrating exchange rate APIs to fetch
current conversion rates between multiple international currencies. The project not only
covers the basic structure and styling using HTML and CSS but also focuses on
implementing interactive features with JavaScript, such as dynamic result updates, API data
handling, and error management. Advanced features including real-time updates, currency
symbols, and decimal precision are also incorporated to enhance user experience.
This report documents the complete development lifecycle of the currency converter, from
design and implementation to testing and deployment. Furthermore, it outlines potential
future improvements such as expanding currency support, offline functionality, and
integration with mobile platforms. The result is a lightweight, responsive, and practical web
application that addresses a real-world problem effectively.

7
 1. INTRODUCTION

1.1 Purpose of the Report

This report is presented in partial fulfillment of the requirements for the Bachelor of
Science degree under the Department of Science. The primary objective of this report is
to document the design and development process of a Currency Converter application.
It serves as a guide to understanding how modern web technologies can be utilized to
build a real-time currency conversion tool that is both functional and user-friendly.
This report aims to provide detailed insights into the application’s functionality, user
interface, and implementation using front-end web development technologies. The
project highlights the importance of using current exchange rate data to ensure accurate
currency conversions, which are essential in global financial transactions.

1.2 Overview of Currency Converter

A currency converter is a digital tool that allows users to convert one currency into another
based on real-time exchange rates. This is particularly useful for travelers, international
businesses, e-commerce users, and financial analysts who need quick and accurate
currency conversions.
The application developed in this project is a simple yet effective web-based tool. It
allows the user to:
• Select source and target currencies.
• Input the amount to be converted.
• Get instant results based on live exchange rate data.
The project demonstrates how even a basic web application can solve real-world problems
using easily accessible technologies.

1.3 Technologies Used

To develop the currency converter, the following technologies and tools were used:
• HTML(HyperText Markup Language):
Used to create the structure of the web page, including input boxes,
dropdown menus, and buttons.
• CSS (Cascading Style Sheets):
Applied to enhance the visual design and layout of the application, making it
clean, modern, and responsive.
• JavaScript:
JavaScript is used to implement the logic for:

8
 o Fetching exchange rate data from a web API.
o Performing currency conversion calculations.
o Displaying results dynamically on the screen.
o Managing user interactions with the interface.
• Exchange Rate API:
A third-party service (such as ExchangeRate-API or similar) is used to get
the latest conversion rates between various world currencies.
These technologies together enable the development of a responsive, accurate, and real-
time web application for currency conversion.

9
 2. HTML STRUCTURE

The foundation of any web application begins with a well-structured HTML layout.
HTML (HyperText Markup Language) is responsible for creating the structure of web
pages by defining elements like input fields, buttons, containers, and other components
required for user interaction.

2.1 Basic HTML Document Setup

The first step in creating a currency converter is setting up the basic structure of an HTML
document. A proper HTML document includes a DOCTYPE declaration, html, head, and
body tags. Within the head, we define the title and link to external stylesheets (CSS), and
in the body, we place the visible content and functional elements.

2.2 Creating Containers for Input Fields and Output

To interact with the user, the application must allow:

• Input of the amount to convert,

• Selection of source and target currencies, and

• Displaying the conversion result.

These elements are organized using <div> containers to create a clean layout.

2.3 Adding Button for Conversion

To perform the conversion operation, a button is needed. This button will be programmed
using JavaScript to fetch the input values, perform the conversion, and display the result.

10
 3. CSS STYLING

Cascading Style Sheets (CSS) are a fundamental technology used to control the visual
presentation of a web application. In the Currency Converter project, CSS is used to
enhance the aesthetic appeal, improve readability, maintain visual consistency, and create
a user-friendly interface. While HTML provides the structure and JavaScript adds
interactivity, CSS is responsible for the design and layout of all visual elements.
CSS separates content from design, which is essential for maintaining scalability and
reusability in modern web development. By using CSS, developers can create an
engaging and accessible user experience without altering the underlying HTML or
JavaScript logic.

3.1 Linking CSS File to HTML

To apply styling rules to the HTML structure, CSS must be correctly linked to the
document. This is typically done by linking an external stylesheet, which ensures a clean
separation between structure and style. Linking a CSS file enables the consistent
application of visual properties across multiple pages or sections of the same application.

3.2 Styling Input Fields and Button

Input fields and buttons are key interactive elements in the currency converter. Proper
styling of these components ensures a clean, intuitive, and responsive interface for users.
Visual adjustments to size, spacing, font, background color, border, and hover effects
improve usability by making inputs more noticeable and buttons more interactive.
Designing inputs to be clear and legible is critical for guiding user behavior. Buttons,
being call-to-action elements, must stand out through distinct styling that signals their
functionality. Visual feedback on hover or click interactions also contributes to a dynamic
and polished user experience.

3.3 Customizing the Layout and Visual Elements

Beyond individual components, CSS is used to define the overall layout and structure of
the application. Layout management involves arranging containers, aligning elements,
and defining spacing (margins and paddings) to ensure a logical and balanced visual flow.
A well-organized layout helps users navigate the application efficiently and intuitively.
Customizing visual elements includes choosing appropriate color schemes, fonts,
shadows, borders, and background styles that align with the project's aesthetic and
usability goals. Good design principles such as consistency, visual hierarchy, and
whitespace utilization are applied through CSS to enhance the visual experience.

11
 4. JavaScript FUNCTIONALITY

JavaScript plays a crucial role in making a static web page dynamic and interactive.
In the context of this currency converter project, JavaScript is responsible for enabling
the real-time conversion of currencies, managing user interactions, fetching live exchange
rates, and updating the interface based on the user’s input. The integration of JavaScript
brings the application to life by ensuring that data is processed and displayed without
needing to reload the page.

4.1 Introduction to JavaScript

JavaScript is a client-side scripting language that allows web developers to create
dynamic and responsive user interfaces. It is an integral part of modern web development,
used alongside HTML and CSS. In this project, JavaScript provides the functionality to
capture user inputs, perform logic-based processing, fetch data from an external API, and
update the output section in real time.
JavaScript enhances the usability of the currency converter by allowing seamless
interaction without page reloads, making the user experience efficient and responsive.

4.2 Retrieving Exchange Rates

The currency converter relies on accurate and up-to-date exchange rates to perform
conversions. These rates can be sourced either statically through a predefined set of values
or dynamically using third-party APIs that provide real-time currency data (e.g.,
ExchangeRate-API, Open Exchange Rates).
When using an API, JavaScript performs an asynchronous request to retrieve exchange
data, which is then parsed and stored for use in conversion calculations. This approach
ensures the currency values reflect real-world rates, improving the reliability of the
application.

4.3 Calculating Currency Conversion

Once the exchange rate has been obtained, JavaScript performs the core function of
converting the entered amount from one currency to another. This is done using basic
arithmetic operations where the input value is multiplied by the exchange rate.
Additionally, JavaScript ensures proper formatting of the output, including rounding the
result to a specific number of decimal places for better readability. The conversion logic
may also handle scenarios where the user selects the same currency for both input and
output, ensuring accurate results or skipping unnecessary operations.

12
4.4 Displaying Conversion Result
The converted amount must be presented to the user in a clear and understandable format.
JavaScript dynamically updates a specific section of the HTML page, usually identified
by an element ID, to display the result. This is achieved without refreshing the page,
contributing to a smooth user experience.
JavaScript also ensures that the result is formatted correctly, showing the currency codes
and symbols along with the calculated value, making the output informative and user-
friendly.

4.5 Handling User Interactions

User interaction is at the heart of any web-based application. JavaScript listens to specific
actions (events) such as button clicks, value changes in input fields, or dropdown
selections. Based on these actions, appropriate functions are triggered.
For example, when the "Convert" button is clicked, JavaScript gathers the values from
input fields, validates them, performs the conversion, and updates the result section.
Additionally, JavaScript can handle invalid inputs by displaying appropriate error
messages, thereby enhancing the robustness of the application.

13
 5. INTEGRATION OF EXCHANGE RATE API

One of the core functionalities of a currency converter application is the ability to

provide real-time exchange rates. This is achieved by integrating an external Exchange
Rate API (Application Programming Interface) into the application. APIs allow access
to up-to-date financial data provided by online services and global currency databases.
The integration of such an API ensures that the currency conversion reflects accurate
market values, enhancing the reliability and practicality of the application.
By using an API, developers can avoid hardcoding currency values and instead
dynamically fetch exchange rates that are constantly updated, making the application
suitable for real-world use.

5.1 Exploring Exchange Rate APIs

Numerous exchange rate APIs are available on the internet, offering services ranging from
free to enterprise-level plans. Popular options include ExchangeRate-API, Open
Exchange Rates, Fixer.io, and CurrencyStack. These APIs differ in terms of data accuracy,
request limits, supported currencies, and frequency of updates.
Before selecting an API, various factors are considered, such as:
• The number of supported currencies
• Data reliability and update frequency
• Availability of historical data
• Free tier limitations and pricing for higher usage
• Authentication and security features
The selected API should meet the functional needs of the project while aligning with
usage and budget constraints.

5.2 Making API Requests

After choosing a suitable API, the next step is to establish communication between the
client-side application and the API server. This is done by making HTTP requests,
typically using the GET method to retrieve data.
To perform a successful request, an endpoint URL is used, often including an API key
provided upon registration with the API provider. When the user initiates a conversion,
the application sends a request to the API to fetch the most recent exchange rates for the
selected currencies.
It is important to handle these requests asynchronously to prevent the application from
freezing or becoming unresponsive while waiting for the data to load.

14
5.3 Parsing API Response
Once a response is received from the API, it is generally in JSON format, containing
multiple currency exchange values. The application must parse this structured data to
extract the specific exchange rate relevant to the user’s selected currencies.
This parsed data is then stored in variables or data structures, allowing the application to
use it during the conversion process. Proper parsing ensures accurate data handling and
prevents errors or miscalculations in currency conversion.
Additionally, the parsing logic should be robust enough to handle any unexpected or
malformed data, and it should also include checks for empty or invalid responses.

5.4 Updating Exchange Rates

To maintain accuracy and reflect ongoing market changes, exchange rates must be
updated regularly. This can be achieved by either fetching new data upon every
conversion request or setting timed intervals for automatic updates.
Real-time updates are particularly important in financial applications where rate
fluctuations can significantly impact results. Depending on the API and application
design, caching of data for a short duration may also be implemented to reduce the
number of API calls and improve performance.
Furthermore, handling cases where the API is unreachable or responds with an error is
vital. The application should display meaningful error messages or fallback values to
maintain a smooth user experience.

15
 6. ADVANCED FEATURES

To make the Currency Converter project more dynamic, accurate, and user-centric,
several advanced features can be incorporated. These features not only enhance the
functionality but also significantly improve the overall usability and appeal of the
application. While the core functionality focuses on basic conversion using exchange
rates, these enhancements offer real-time responsiveness, better presentation, precision,
and improved interaction.

6.1 Real-time Exchange Rate Updates

Real-time updates ensure that the currency conversion reflects the latest market values.
This is especially important in financial applications where rates can fluctuate frequently
due to global market activities. By implementing periodic data fetch mechanisms or live
update triggers, the application can provide the most accurate exchange rates to the user
without manual intervention.
This feature improves the application's reliability and trustworthiness, particularly for
users who depend on timely and accurate financial information for trading, travel, or
business purposes. It also eliminates the need to reload or refresh the page manually for
new data.

6.2 Adding Currency Symbols

Displaying currency symbols alongside values (such as ₹ for INR, $ for USD, or € for
EUR) enhances clarity and ensures that users immediately recognize the involved
currencies. This small but impactful visual element reduces ambiguity and improves the
readability of the conversion output.
Using appropriate symbols helps cater to an international user base and aligns the output
with real-world financial standards. It also adds a layer of polish and professionalism to
the application interface.

6.3 Implementing Decimal Precision

In currency conversion, precision is crucial—especially when dealing with financial
transactions, billing, or large sums. Implementing decimal precision allows the
application to control the number of digits displayed after the decimal point. This ensures
a consistent and clear presentation of values, avoiding cluttered or overly detailed figures.
Allowing a fixed or user-defined precision level not only enhances the accuracy of results
but also improves user satisfaction by tailoring the display to their specific needs (e.g., 2
decimal places for most currencies).

16
6.4 Enhancing User Experience
The user experience (UX) is a critical aspect of any application. For the currency
converter, enhancements might include intuitive form design, keyboard navigation, auto-
selection of frequently used currencies, responsive design for mobile devices, and
interactive feedback such as animations or loading indicators.
Improving UX also involves error handling (e.g., invalid input alerts), clear labeling, and
optimizing performance so that conversions feel instant and smooth. These features
collectively contribute to making the application accessible, efficient, and enjoyable for
users across all demographics.

17
 7. TESTING AND DEBUGGING

Testing and debugging are essential phases in the software development lifecycle that
ensure the Currency Converter application functions correctly, efficiently, and reliably
across different environments. These processes help identify and fix issues before
deployment, improving the overall quality and user experience of the application.

7.1 Validating User Inputs

Input validation is crucial to prevent incorrect or malicious data from being processed by
the application. It involves checking the user’s inputs for correctness, completeness, and
conformity to expected formats before performing any currency conversion.
For example, the amount entered should be numeric and positive, and currency selections
must be valid options. Validating inputs helps avoid runtime errors, incorrect conversions,
and potential security vulnerabilities. It also guides users by providing immediate
feedback if inputs are invalid, encouraging proper usage of the application.

7.2 Error Handling

Even with proper validation, unexpected situations such as API failures, network issues,
or programming errors may occur. Error handling is the strategy of anticipating these
issues and managing them gracefully without crashing the application.
This includes detecting errors during API requests, handling cases where exchange rate
data is unavailable, and managing invalid operations. Proper error handling improves
robustness by providing clear, user-friendly error messages and fallback mechanisms,
ensuring the application remains functional and informative even in adverse conditions.

7.3 Cross-browser Compatibility

Users access web applications through a variety of browsers and devices, each
interpreting code differently. Ensuring cross-browser compatibility means the currency
converter should work consistently across popular browsers like Chrome, Firefox, Safari,
Edge, and on different operating systems and screen sizes.
Testing the application on multiple platforms helps identify rendering issues, broken
functionalities, or styling problems that may affect user experience. Addressing these
ensures a wider reach and usability, preventing user frustration caused by browser-
specific bugs or inconsistencies.

18
 8. TESTING AND DEBUGGING

Deployment and hosting are the final stages in bringing the Currency Converter
application from development to a live environment accessible by users worldwide. These
stages involve preparing the application for public access, selecting an appropriate
hosting platform, and properly configuring the system to ensure smooth operation.

8.1 Preparing Files for Deployment

Before deployment, it is essential to organize and optimize the project files, including
HTML, CSS, JavaScript, and any assets such as images or fonts. This preparation may
involve minimizing file sizes, removing unnecessary code, and structuring files in a clear
and accessible directory format.

Proper file preparation ensures efficient loading times and ease of maintenance. It also
reduces the risk of deployment errors and facilitates easier updates or debugging post-
deployment.

8.2 Choosing a Web Hosting Service

Selecting the right web hosting service is critical for the performance, security, and
scalability of the currency converter application. Hosting options range from free
platforms suitable for small projects and testing, to paid services offering advanced
features such as custom domains, SSL certificates, and higher bandwidth.

Factors influencing the choice include cost, reliability, ease of use, support for necessary
technologies, and scalability for future growth. Popular choices include shared hosting
providers, cloud services like AWS or Azure, and static site hosts such as GitHub Pages
or Netlify.

8.3 Uploading and Configuring the Application

Once a hosting service is chosen, the next step is uploading the prepared files to the server.
This can be done through various methods such as FTP clients, web-based dashboards, or
integrated deployment pipelines depending on the hosting platform.

Configuration may involve setting up domain names, securing the site with HTTPS,
configuring environment variables (for APIs), and ensuring correct file permissions.
Proper configuration guarantees that the application functions correctly and securely,
providing users with uninterrupted access.

19
 9. CONCLUSION

The conclusion chapter summarizes the key outcomes of the Currency Converter project
and discusses potential improvements and future directions to enhance its functionality and
usability.

9.1 Summary of Achievements

The Currency Converter application successfully integrates essential web technologies —
HTML, CSS, and JavaScript — to provide users with a seamless tool for converting currency
values in real-time. The project demonstrates effective use of API integration to fetch live
exchange rates, enabling accurate and up-to-date conversions.
Key achievements include:
• Development of a clean and intuitive user interface, ensuring ease of use.
• Implementation of real-time exchange rate retrieval, enhancing reliability.
• Robust input validation and error handling to improve user experience and application
stability.
• Cross-browser compatibility, ensuring consistent performance across different
platforms.
• Deployment of the application on a web hosting platform, making it accessible to
users worldwide.
These accomplishments reflect a comprehensive understanding of front-end development,
asynchronous programming, and web deployment processes.

9.2 Future Enhancements and Possibilities

While the current implementation of the Currency Converter fulfills its primary objectives,
several enhancements could further improve its capabilities:
• Expanded Currency Support: Incorporating more global currencies, including
cryptocurrencies, to cater to a broader user base.
• Offline Mode: Adding functionality to use the last fetched exchange rates when
internet connectivity is unavailable.
• User Preferences: Allowing users to save favorite currency pairs for quicker access.
• Mobile Optimization: Enhancing responsiveness and usability on mobile devices
with advanced UI/UX improvements.
• Multi-language Support: Introducing localization features to support multiple
languages for global accessibility.

20
 10. REFERENCES

I. MDN Web Docs

Comprehensive documentation on HTML, CSS, and JavaScript used extensively for
understanding web development fundamentals and implementing the Currency
Converter interface and functionality.
Available at: https://developer.mozilla.org/en-US/

II. W3Schools - Currency Converter Tutorial

A practical guide that helped in designing the basic structure of the currency
converter, including input handling and user interaction with buttons.
Available at: https://www.w3schools.com/howto/howto_js_currency_converter.asp

III. ExchangeRate-API Documentation

Official documentation of the ExchangeRate-API which was utilized to fetch real-
time currency exchange rates, ensuring the application converts currencies with up-to-
date data.
Available at: https://www.exchangerate-api.com/docs/overview

IV. REST API Tutorial - Using Fetch API in JavaScript

This resource provided detailed instructions on making API calls using JavaScript’s
fetch() method, which was crucial for integrating external exchange rate data into the
converter.
Available at: https://restfulapi.net/javascript-fetch-api/

V. Stack Overflow
An essential community-driven platform used for troubleshooting programming
challenges during the development and debugging stages of the project.
Available at: https://stackoverflow.com/

VI. Dev Bhoomi Group of Institutions, Saharanpur - Academic Curriculum and

Guidelines
Provided academic guidelines and project requirements that helped shape the structure
and standards followed in this report and implementation.

VII. Eloquent JavaScript by Marijn Haverbeke

A foundational book used to deepen understanding of JavaScript programming
concepts, particularly for handling dynamic user interactions and asynchronous
operations.

21
VIII. CSS-Tricks - CSS Styling Techniques
A valuable resource for learning best practices in CSS design, enabling the creation of
an appealing and responsive user interface for the currency converter.
Available at: https://css-tricks.com/

IX. Google Developers - Best Practices for Responsive Web Design

Guidance on designing applications that work smoothly across different devices and
screen sizes, contributing to the app’s cross-browser compatibility.
Available at: https://developers.google.com/web/fundamentals/design-and-
ux/responsive

X. FreeCodeCamp - JavaScript Tutorial

An interactive learning platform that provided tutorials and exercises instrumental in
strengthening JavaScript skills applied in this project.
Available at: https://www.freecodecamp.org/learn/

22