lOMoARcPSD|29832454

Mini Project Report on currency converter

Introduction to Blockchain (Graphic Era Deemed to be University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Bruno Dash ([email protected])
 lOMoARcPSD|29832454

Mini Project Report on

CURRENCY CONVERTER USING HTML,CSS AND JAVASCRIPT

Submitted in partial ful昀椀llment of the requirement for the award of

the degree of

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING

Submitted by:

Student Name :Hari Singh Chaudhary University Roll No: 2118591

Under the Mentorship of

Dr. Mahesh manchandana

Department of Computer Science and Engineering

Graphic Era hill university,
Dehradun, U琀琀arakhand

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

January 2023

CANDIDATE’S DECLARATION

I hereby certify that the work which is being

presented in the project report entitled “Currency
converter” in partial fulfillment of the
requirements for the award of the Degree of
Bachelor of Technology in Computer Science and
Engineering of the Graphic Era ( Hill to be
University), Dehradun shall be carried out by the
under the mentorship of Dr. Mahesh manchandana
Department of Computer Science and Engineering,
Graphic Era ( HIll to be University), Dehradun.

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

Table of contents

1. Introduc琀椀on
1.1 Purpose of the Report
1.2 Overview of Currency Converter
1.3 Technologies Used

2. HTML Structure
2.1 Basic HTML Document Setup
2.2 Crea琀椀ng Containers for Input Fields and Output
2.3 Adding Bu琀琀on for Conversion

3. CSS Styling
3.1 Linking CSS File to HTML
3.2 Styling Input Fields and Bu琀琀on
3.3 Customizing the Layout and Visual Elements

4. JavaScript Func琀椀onality
4.1 Introduc琀椀on to JavaScript
4.2 Retrieving Exchange Rates
4.3 Calcula琀椀ng Currency Conversion
4.4 Displaying Conversion Result

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

4.5 Handling User Interac琀椀ons

5. Integra琀椀on of Exchange Rate API

5.1 Exploring Exchange Rate APIs
5.2 Making API Requests
5.3 Parsing API Response
5.4 Upda琀椀ng Exchange Rates

6. Advanced Features
6.1 Real-琀椀me Exchange Rate Updates
6.2 Adding Currency Symbols
6.3 Implemen琀椀ng Decimal Precision
6.4 Enhancing User Experience

7. Tes琀椀ng and Debugging

7.1 Valida琀椀ng User Inputs
7.2 Error Handling
7.3 Cross-browser Compa琀椀bility

8. Deployment and Hos琀椀ng

8.1 Preparing Files for Deployment
8.2 Choosing a Web Hos琀椀ng Service
8.3 Uploading and Con昀椀guring the Applica琀椀on

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

9. Conclusion
9.1 Summary of Achievements
9.2 Future Enhancements and Possibili琀椀es

10. References

1. Introduc琀椀on:

1.1 Purpose of the Report:

This sec琀椀on provides an overview of the report's objec琀椀ve, which is
to guide the reader in building a currency converter web applica琀椀on
using HTML, CSS, and JavaScript.

1.2 Overview of Currency Converter:

The introduc琀椀on explains the concept and func琀椀onality of a currency
converter, highligh琀椀ng its signi昀椀cance in today's global economy.

1.3 Technologies Used:

This subsec琀椀on brie昀氀y introduces the technologies employed in the
project, namely HTML, CSS, and JavaScript, and their respec琀椀ve roles
in building the currency converter.

2. HTML Structure:

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

2.1 Basic HTML Document Setup:

This sec琀椀on explains the essen琀椀al components of an HTML
document and demonstrates how to set up a basic structure for the
currency converter applica琀椀on.

2.2 Crea琀椀ng Containers for Input Fields and Output:

Detailed instruc琀椀ons are provided for crea琀椀ng input 昀椀elds where
users can enter currency amounts and selec琀椀ng currencies, as well as
an output area to display the converted result.

2.3 Adding Bu琀琀on for Conversion:

The report illustrates the process of adding a bu琀琀on element to
trigger the currency conversion func琀椀on when clicked by the user.

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

3. CSS Styling:
3.1 Linking CSS File to HTML:

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

This sec琀椀on demonstrates how to link an external CSS 昀椀le to the

HTML document to apply styles and enhance the visual appearance
of the currency converter.

3.2 Styling Input Fields and Bu琀琀on:

Instruc琀椀ons are provided to customize the appearance of input 昀椀elds
and the conversion bu琀琀on using CSS proper琀椀es.

3.3 Customizing the Layout and Visual Elements:

The report explores various CSS techniques to create an a琀琀rac琀椀ve
layout, customize fonts, colors, and backgrounds, and improve the
overall visual appeal of the applica琀椀on.

4. JavaScript Func琀椀onality:
4.1 Introduc琀椀on to JavaScript:
This sec琀椀on introduces JavaScript and its role in
implemen琀椀ng the currency conversion func琀椀onality.

4.2 Retrieving Exchange Rates:

The report describes di昀昀erent methods for retrieving
exchange rates, including using an API or a prede昀椀ned list,
and explains how to incorporate this func琀椀onality into the
applica琀椀on.

4.3 Calcula琀椀ng Currency Conversion:

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

Instruc琀椀ons are provided for wri琀椀ng JavaScript code to

calculate the converted amount based on the user's input
and the selected currencies.

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

4.4 Displaying Conversion Result:

The report explains how to dynamically update the output
area with the result of the currency conversion using
JavaScript.

4.5 Handling User Interac琀椀ons:

This sec琀椀on covers adding event listeners to the
conversion bu琀琀on and handling user interac琀椀ons to
ensure a smooth user experience.

5. Integra琀椀on of Exchange Rate API:

5.1 Exploring Exchange Rate APIs:
The report explores various exchange rate APIs
available for retrieving real-琀椀me currency exchange
rates and highlights their advantages and limita琀椀ons.

5.2 Making API Requests:

Instruc琀椀ons are provided for making API requests using
JavaScript's `fetch()` func琀椀on to fetch the exchange
rate data from the chosen API.

5.3 Parsing API Response:

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

The report explains how to parse the API response to

extract the required exchange rate data and store it in
variables for further use.

5.4 Upda琀椀ng Exchange Rates:

This sec琀椀on describes how to implement a mechanism
to update exchange rates at regular intervals to ensure
the accuracy of conversions.

6. Advanced Features:
6.1 Real-琀椀me Exchange Rate Updates:
The report explores the concept of real-琀椀me exchange
rate updates and explains how to incorporate this
feature into the currency converter applica琀椀on.

6.2 Adding Currency Symbols:

Instruc琀椀ons are provided to enhance the user
experience by displaying currency symbols alongside
the conversion results.

6.3 Implemen琀椀ng Decimal Precision:

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

The report demonstrates how to implement decimal

precision for the converted amounts, allowing users to
control the number of decimal places displayed.

6.4 Enhancing User Experience:

This sec琀椀on discusses addi琀椀onal user-friendly
enhancements, such as auto-selec琀椀ng the input 昀椀elds
and keyboard shortcuts for quicker interac琀椀on.

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

7. Tes琀椀ng and Debugging:

7.1 Valida琀椀ng User Inputs:
The report explains the importance of valida琀椀ng user
inputs and provides guidelines for implemen琀椀ng
valida琀椀on mechanisms to ensure correct inputs.

7.2 Error Handling:

Instruc琀椀ons are provided for handling poten琀椀al errors
that may occur during the currency conversion process
and displaying appropriate error messages to the user.

7.3 Cross-browser Compa琀椀bility:

This sec琀椀on covers the importance of tes琀椀ng the
currency converter applica琀椀on on di昀昀erent browsers
and devices to ensure compa琀椀bility and a consistent
user experience.

8. Deployment and Hos琀椀ng:

8.1 Preparing Files for Deployment:
Instruc琀椀ons are provided for organizing and preparing
the HTML, CSS, and JavaScript 昀椀les for deployment to a
web server.

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

8.2 Choosing a Web Hos琀椀ng Service:

The report explores di昀昀erent web hos琀椀ng op琀椀ons and
provides guidance on selec琀椀ng a suitable hos琀椀ng
service for deploying the currency converter.

8.3 Uploading and Con昀椀guring the Applica琀椀on:

This sec琀椀on explains the steps involved in uploading
the applica琀椀on 昀椀les to the web server and con昀椀guring
any necessary se琀�ngs for the currency converter to
func琀椀on properly.

9. Conclusion:
9.1 Summary of Achievements:
This subsec琀椀on summarizes the key achievements of
building the currency converter using HTML, CSS, and
JavaScript.

9.2 Future Enhancements and Possibili琀椀es:

The report concludes by discussing poten琀椀al future
enhancements, such as adding more currency op琀椀ons,

Downloaded by Bruno Dash ([email protected])

 lOMoARcPSD|29832454

implemen琀椀ng addi琀椀onal features, and exploring new

technologies.

10. References:
A list of references is provided for the sources used
during the research and development of the currency
converter applica琀椀on.

Note: This table of contents provides a broad overview

of the report's structure and

your web host server.

Downloaded by Bruno Dash ([email protected])