Maharashtra State Board of Technical Education

Mumbai. (M.S.)

MICRO PROJECT
On
“Website for currency conversion”
Submitted by
Swapnil Rajendra Patil
Kunal Ghamlal Lohar

G.S. Mandal’s
Department of Computer
Engineering Marathwada Institute of
Technology, Polytechnic, Aurangabad.

Academic Year: - 2022-2023

 MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION

CERTIFICATE
This is to certify that: -
Roll Enrollment Exam
Name of Student
No. No. Seat No.
39 Swapnil Rajendra Patil 2000660215

27 Kunal Ghamlal Lohar 2000660201

Have successfully completed “Website for currency conversion” Micro-

project for the subject CSS as in the enclosed ‘Portfolio’ during his / her tenure
of Completing the Diploma in Computer Engineering (CO5I) in Academic
Year 2022-2023 from M.I.T. Polytechnic, Aurangabad with Institute Code
0066.

Date:

Prof.B.A.Chatterjee Prof. A.S.Nagrik

Project Guide H.O.D

Principal
Marathwada Institute of Technology,
Polytechnic, Aurangabad
 INDEX

Annexure-IV Micro Project Teacher Evaluation Sheet

Annexure-I A “Format for Micro-Project Proposal”

1.0 Aim/Benefits of Micro Project (minimum 30-50 words)

2.0 Course Outcomes Addressed

3.0 Proposed Methodology (procedure in brief that will be followed to do the micro-
project in about 100-200 words.)

4.0 Action Plan (Sequence and time required for major activity.)

5.0 Resources required (major resources such as row material, some machining facility,
software etc.)

Annexure-II A “Format for Micro-Project Report”

1.0 Rationale (Importance of the project, in about 30 to 50 words. This is a modified
version of the earlier one written after the work)

2.0 Aim/Benefits of Micro Project:

3.0 Course Outcomes Achieved (Add to the earlier list is more Cos are addressed)

4.0 Literature Review

5.0 Actual Methodology Followed (Write step wise work done, data collected and its
analysis (if any). The contribution of individual member may also be noted.)

6.0 Actual Resources Used (mention the actual resources used).

7.0 Outputs of the micro projects (Drawings of the prototype, drawing of survey,
presentation of collected data, findings etc.)

8.0 Skill Developed/Learning outcome of this micro project

9.0 Applications of this micro project

 Annexure-IV
Micro Project

(Teacher Evaluation Sheet)

Name of Program: Diploma in Computer Engineering Semester: - 5
Course Title: CSS
Title of Micro Project: Website for currency conversion

Course Outcomes Achieved:

a) To develop a webpage using tags and events .

b) The aim of this project is to develop a website which used for currency conversion.

Process and Individual Total

Roll Enrollment Exam Product Presentation Marks
Name of Student
No. No. Seat No. Assessment / Viva (10)
(06) (04)
39 Swapnil Rajendra Patil 2000660215

27 Kunal Ghamlal Lohar 2000660201

Comments / Suggestions about work:

Signature of Teacher :

Name and Designation : _________________________

of the Teacher
 Annexure-I

Micro-Project Proposal
(Format for Micro-Project Proposal About 1-2 pages)

Title of Micro-Project:- Calculator using JavaScript

1.0 Aim/Benefits of Micro Project (minimum 30-50 words)

a) Basis Functions and exponents.

b) Get to know the current currency exchanges rates of different countries

c) Daily use calculation

d) Currency convertor

e) Logarithm

f) Use of api key

2.1 Course Outcomes Addressed

a) Use Visual Studio IDE to develop webpage

b) To develop a webpage using tags and events.
c) The aim of this project is to develop a website that converts the currency rates
of different countries
3.0 Proposed Methodology (Procedure in brief that will be followed to do the micro-
project in about 100-200 words.)

a) Firstly, We decide a particular topic, that is webpage based Calculator using html, CSS ,JS .
b) After the topic selection the main procedure of developing webpage is to construct a rough sketch of the
webpage
I.e., How our webpage will be shown/should be shown???
c) After the rough work we got an idea about our aim, so start to code….
d) We try to make base of webpage using html.
e) Then after that we try to add some colors and designs using CSS.
f) At last the main logic of calculations was code using JavaScript
g) After all we try to test the webpage and fix the errors
h) Now we are ready to use this webpage for our daily use calculations.

3.0 Action Plan (Sequence and time required for major activity.)

Sr. Details of Activity Planned Planned Name of

No Start Date Finish Date Responsible
Team Members
1) Topic Selection 3/09/22 04/09/22 Both

2) Information Search 05/09/22 10/09/22 Kunal

3) Rough overview 10/09/22 11/09/22 Swapnil

4) Gathering the information 11/09/22 14/09/22 Kunal

6) Completing report for project 14/09/22 16/09/22 Both

7) Submission 17/09/22 17/09/22 Both

5.0 Resources required (major resources such as row material, some machining
facility, software etc.)

Sr. Name of Resource/Material Specification Qty. Remarks

No
1) Desktop, Laptop i-5, 8 GB RAM, 1
Windows 10
2) Software VS code -

3) INTERNET

Names of Team Members with Roll No.: -

Roll No. Name of Student

39 Swapnil Rajendra Patil

27 Kunal Ghamlal Lohar

 Annexure-II
Micro-Project Report
(Format for Micro-Project Report minimum 4 pages)

Title of Micro-Project: - Website for currency conversion

1.0 Rationale (Importance of the project, in about 30 to 50 words. This is a modified

version of the earlier one written after the work)

 The purpose of this website is to convert the currency rates

 To do so efficiency
 Get to know about current exchanges rates of various countries and
compare them.
 For Common Man it is Friendly to use

2.0 Aim/Benefits of Micro Project:

1) Basis Functions and exponents.

2) Get to know the current exchanges of different countries

3) Daily use calculation

4) Currency convertor

5) Use of api key

3.0 Course Outcomes Achieved (Add to the earlier list is more Cos are addressed)

a) Use Visual Studio IDE to develop webpage

b) To develop a webpage using tags and events.
c) The aim of this project is to develop a website that converts the currency rates
of different countries
4.0 Literature Review:

We use this website for various new tags and events to know
www.geeksforgeeks.com

Using this website we get api key , which we used in our project , this api gets the country
name and returns the currency exchange rate
https://v6.exchangerate-api.com/v6/16be26f452599b251751d4f6/latest/

5.0 Actual Methodology Followed (Write step wise work done, data collected and its
analysis (if any). The contribution of individual member may also be noted.)

a) Topic Selection –

Firstly, I thought of few topics ,being little bit confused about the topics I finally

made the decision and took the topic as Web based Website for currency

conversion .

b) Information Search –

I made a research on the topic and gathered various information from different

websites, books. Then I sorted the information and classified all necessary search

which will be used to develop a Website for currency conversion.

Rough overview –

This was the initialize stage of the project , in which I started a imagining how

actually the webpage should be look after the completion and set the structure of

webpage on goal
c) Actual project –

At this step I started to code , Firstly I Construct using html , then I use some CSS to

make the webpage designable , after that the actual code was started on the

buttons and textbox , we Start to performs events on the components and finaly the

code was ready to run.

d) Problem Solving –

While doing project I came up with errors and doubts, I made an attempt to solve

them, Then I discussed it with the subject teacher then I got the right way to move

forward for the project

e) Final Time –

At this time, I was completed with the project then computed all the project to a

specific report and made a final pdf.

6.0 Actual Resources Used (mention the actual resources used).

Sr. Name of Resource/Material Specification Qty. Remarks

No
1 Desktop, Laptop i-5, 8GB RAM, 1

Windows 11

2 Software VS code -

3 Internet -
8.0 Skill Developed/Learning outcome of this micro project

a) Understand the basic functions on your calculator

b) Understand using Calculator, functions are needed for a given problem.

c) Apply knowledge of Calculator function to a range of mathematical calculations

9.0 Applications of this micro project: -

 Get knowledgeable about current exchange rates of different country
 Currency conversion
 CONTENT
 INTRODUCTION
 OBJECTIVE
 DESCRIPTION OF PROJECT
 TECHNOLOGY & TOOLS USED:
 ADVANTAGES
 PROGRAM CODE
 OUTPUT
 CONCLUSION AND REFRENCE

INTRODUCTION
JavaScript is a Programming Language commonly used in web development. It was
originally developed by Netscape to add dynamic and interactive elements to websites.
While JavaScript is influenced by Java, the syntax is more similar to C and is based on
ECMA Script, a scripting language developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the source code is processed
by the client's web browser rather than on the web server. This means JavaScript
functions can run after a webpage has loaded without communicating with the server.
For example, a JavaScript function may check a web form before it is submitted to
make sure all the required fields have been filled out. The JavaScript code can produce
an error message before any information is actually transmitted to the server.

OBJECTIVE
 To develop a program that shows exchange rates of selected country
 The aim of this project is to show Currency conversion using Javascript
 DESCRIPTION OF PROJECT
In this project we will learns how to develop a website which converts or shows
currency exchange rate . We use html , css and javascript to construct this website . In
this code we have added some background imager to look more attractive .We use
various tags and use some colour combination to make the webpage attractive . We
also use user defined functions. In this code we also various graphics objects. The path
of the image in provided in image src tag. In this manner we are trying to show
Currency conversion in JavaScript.

TECHNOLOGY AND TOOLS USED

 System used (COMP/LAPTOP): Computer Processor, 8GB RAM
 Operating System: Windows 11
 Software: Visual studio

ADVANTAGES
1. User can convert and know the currency rate .
2. User will get more attracted towards design and its Functions .
3. User can use this website at time of foreign trips to convert rate of their currency
into respective foreign currency
CODING

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Currency Converter</title>
<style>

@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 10px;
background-image: url("image1.jpeg");
}
::selection{
color: #fff;
background: #675AFE;
}
.wrapper{
width: 460px;
padding: 60px;
border-radius: 11px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper form{
margin: 40px 0 20px 0;
}
form :where(input, select, button){
width: 100%;
outline: none;
border-radius: 5px;
border: none;
}
form p{
font-size: 18px;
margin-bottom: 5px;
}
form input{
height: 50px;
font-size: 17px;
padding: 0 15px;
border: 1px solid #999;
}
form input:focus{
padding: 0 14px;
border: 2px solid #675AFE;
}
form .drop-list{
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.drop-list .select-box{
display: flex;
width: 115px;
height: 45px;
align-items: center;
border-radius: 5px;
justify-content: center;
border: 1px solid #999;
}
.select-box img{
max-width: 21px;
}
.select-box select{
width: auto;
font-size: 16px;
background: none;
margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
width: 8px;
}
.select-box select::-webkit-scrollbar-track{
 background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
background: #888;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
.drop-list .icon{
cursor: pointer;
margin-top: 30px;
font-size: 22px;
}
form .exchange-rate{
font-size: 17px;
margin: 20px 0 30px;
}
form button{
height: 52px;
color: #fff;
font-size: 17px;
cursor: pointer;
background: #675AFE;
transition: 0.3s ease;
}
form button:hover{
background: #4534fe;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Currency Converter..!!</header>
<form action="#">
<div class="amount">
<p>Enter Amount</p>
<input type="text" value="1">
</div>
<div class="drop-list">
<div class="from">
<p>From</p>
<div class="select-box">

<select> </select>
</div>
</div>
 <div class="icon"><i class="fas fa-exchange-alt"></i></div>
<div class="to">
<p>To</p>
<div class="select-box">

<select></select>
</div>
</div>
</div>
<div class="exchange-rate">Getting exchange rate...</div>
<button>--> CONVERT <--- </button>
</form>
</div>

<script>

let country_list = {
"AED" : "AE",
"AFN" : "AF",
"XCD" : "AG",
"ALL" : "AL",
"AMD" : "AM",
"ANG" : "AN",
"AOA" : "AO",
"AQD" : "AQ",
"ARS" : "AR",
"AUD" : "AU",
"AZN" : "AZ",
"BAM" : "BA",
"BBD" : "BB",
"BDT" : "BD",
"XOF" : "BE",
"BGN" : "BG",
"BHD" : "BH",
"BIF" : "BI",
"BMD" : "BM",
"BND" : "BN",
"BOB" : "BO",
"BRL" : "BR",
"BSD" : "BS",
"NOK" : "BV",
"BWP" : "BW",
"BYR" : "BY",
"BZD" : "BZ",
"CAD" : "CA",
"CDF" : "CD",
"XAF" : "CF",
"CHF" : "CH",
"CLP" : "CL",
"CNY" : "CN",
"COP" : "CO",
"CRC" : "CR",
"CUP" : "CU",
"CVE" : "CV",
"CYP" : "CY",
"CZK" : "CZ",
"DJF" : "DJ",
"DKK" : "DK",
"DOP" : "DO",
"DZD" : "DZ",
"ECS" : "EC",
"EEK" : "EE",
"EGP" : "EG",
"ETB" : "ET",
"EUR" : "FR",
"FJD" : "FJ",
"FKP" : "FK",
"GBP" : "GB",
"GEL" : "GE",
"GGP" : "GG",
"GHS" : "GH",
"GIP" : "GI",
"GMD" : "GM",
"GNF" : "GN",
"GTQ" : "GT",
"GYD" : "GY",
"HKD" : "HK",
"HNL" : "HN",
"HRK" : "HR",
"HTG" : "HT",
"HUF" : "HU",
"IDR" : "ID",
"ILS" : "IL",
"INR" : "IN",
"IQD" : "IQ",
"IRR" : "IR",
"ISK" : "IS",
"JMD" : "JM",
"JOD" : "JO",
"JPY" : "JP",
"KES" : "KE",
"KGS" : "KG",
"KHR" : "KH",
"KMF" : "KM",
"KPW" : "KP",
"KRW" : "KR",
"KWD" : "KW",
"KYD" : "KY",
"KZT" : "KZ",
"LAK" : "LA",
"LBP" : "LB",
"LKR" : "LK",
"LRD" : "LR",
"LSL" : "LS",
"LTL" : "LT",
"LVL" : "LV",
"LYD" : "LY",
"MAD" : "MA",
"MDL" : "MD",
"MGA" : "MG",
"MKD" : "MK",
"MMK" : "MM",
"MNT" : "MN",
"MOP" : "MO",
"MRO" : "MR",
"MTL" : "MT",
"MUR" : "MU",
"MVR" : "MV",
"MWK" : "MW",
"MXN" : "MX",
"MYR" : "MY",
"MZN" : "MZ",
"NAD" : "NA",
"XPF" : "NC",
"NGN" : "NG",
"NIO" : "NI",
"NPR" : "NP",
"NZD" : "NZ",
"OMR" : "OM",
"PAB" : "PA",
"PEN" : "PE",
"PGK" : "PG",
"PHP" : "PH",
"PKR" : "PK",
"PLN" : "PL",
"PYG" : "PY",
"QAR" : "QA",
"RON" : "RO",
"RSD" : "RS",
"RUB" : "RU",
"RWF" : "RW",
"SAR" : "SA",
"SBD" : "SB",
"SCR" : "SC",
"SDG" : "SD",
"SEK" : "SE",
"SGD" : "SG",
 "SKK" : "SK",
"SLL" : "SL",
"SOS" : "SO",
"SRD" : "SR",
"STD" : "ST",
"SVC" : "SV",
"SYP" : "SY",
"SZL" : "SZ",
"THB" : "TH",
"TJS" : "TJ",
"TMT" : "TM",
"TND" : "TN",
"TOP" : "TO",
"TRY" : "TR",
"TTD" : "TT",
"TWD" : "TW",
"TZS" : "TZ",
"UAH" : "UA",
"UGX" : "UG",
"USD" : "US",
"UYU" : "UY",
"UZS" : "UZ",
"VEF" : "VE",
"VND" : "VN",
"VUV" : "VU",
"YER" : "YE",
"ZAR" : "ZA",
"ZMK" : "ZM",
"ZWD" : "ZW"
}

const dropList = document.querySelectorAll("form select"),

fromCurrency = document.querySelector(".from select"),
toCurrency = document.querySelector(".to select"),
getButton = document.querySelector("form button");

for (let i = 0; i < dropList.length; i++) {

for(let currency_code in country_list){
let selected = i == 0 ? currency_code == "USD" ? "selected" : ""
: currency_code == "NPR" ? "selected" : "";
let optionTag = `<option value="${currency_code}" ${selected}>$
{currency_code}</option>`;
dropList[i].insertAdjacentHTML("beforeend", optionTag);
}
dropList[i].addEventListener("change", e =>{
loadFlag(e.target);
});
}
 window.addEventListener("load", ()=>{
getExchangeRate();
});

getButton.addEventListener("click", e =>{
e.preventDefault();
getExchangeRate();
});

const exchangeIcon = document.querySelector("form .icon");

exchangeIcon.addEventListener("click", ()=>{
let tempCode = fromCurrency.value;
fromCurrency.value = toCurrency.value;
toCurrency.value = tempCode;

getExchangeRate();
})

function getExchangeRate(){
const amount = document.querySelector("form input");
const exchangeRateTxt = document.querySelector("form .exchange-
rate");
let amountVal = amount.value;
if(amountVal == "" || amountVal == "0"){
amount.value = "1";
amountVal = 1;
}
exchangeRateTxt.innerText = "Getting exchange rate...";
let url =
`https://v6.exchangerate-api.com/v6/16be26f452599b251751d4f6/latest/$
{fromCurrency.value}`;
fetch(url).then(response => response.json()).then(result =>{
let exchangeRate = result.conversion_rates[toCurrency.value];
let totalExRate = (amountVal * exchangeRate).toFixed(2);
exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value}
= ${totalExRate} ${toCurrency.value}`;
}).catch(() =>{
exchangeRateTxt.innerText = "Something went wrong";
});
}</script>

</body>
</html>
7.0 OUTPUT
CONCLUSION
This website simply help user to know the current exchange rate of their country with
respective country currency

REFRENCE
1. BookName- Javascript Demystified Author-Keogh, Jim
Publication-McGraw-Hill 2015, NewDelhiISBN:0-07060347-2.
2. BookName- Beginning JavaScript Author-Wilton, Paul
Publication- WilyIndia, New Delhi,2015,ISBN:0-7645-5587-1