Scribd
Upload
84 views23 pages

Css Microproject (Final)

This document is a project report for creating a website for currency conversion. It includes an introduction describing the goals of the project, requirements such as hardware and software needed, and source code for the currency conversion application. The source code provided includes HTML, CSS, and JavaScript code to build the user interface and functionality for converting between different currencies.

Uploaded by

Pŕëm Çĥüñïÿäṅ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
84 views23 pages

Css Microproject (Final)

This document is a project report for creating a website for currency conversion. It includes an introduction describing the goals of the project, requirements such as hardware and software needed, and source code for the currency conversion application. The source code provided includes HTML, CSS, and JavaScript code to build the user interface and functionality for converting between different currencies.

Uploaded by

Pŕëm Çĥüñïÿäṅ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

A

PROJECT REPORT ON
“Website for currency conversion”
SUBMITTED BY
Mr. PREM CHUNIYAN [237]

Under the guidance of


Prof . Mr. V.G.LACHAKE

DEPARTMENT OF COMPUTER TECHNOLOGY


Sanjivani Rural Education Society’s

SANJIVANI K.B.P POLYTECHNIC

KOPARGAON : 423603,DIST: AHMEDNAGAR

Page 1
CERTIFICATE
This is certify that the project report entitled
“Website for currency conversion”

SUBMITTED BY
Mr. Prem Chuniyan [237]

Of Fifth semester of Diploma in ‘Computer Technology’ institute of Sanjivani


K.B.P Polytechnic Kopargaon has submitted the Micro-project satisfactorily in
subject “CSS” for academic year 2023 to 2024 as prescribed in the curriculum.

Place: - Kopargaon

Date: ----------------

Subject Teacher HOD Principal


(V.G.Lachake) (G.N.Jorvekar) (A.R.Mirkar)

Page 2
INTRODUCTION

Welcome to our meticulously crafted currency conversion tool, designed with


precision using the trifecta of HTML, CSS, and JavaScript. This intuitive
interface empowers users to effortlessly convert one currency to another,
enhancing the way we navigate the global economy. The HTML framework
serves as the backbone, presenting a user-friendly platform, while CSS elevates
the aesthetics, ensuring an engaging visual experience. Meanwhile, the
JavaScript functionality seamlessly orchestrates the conversion process, allowing
you to swiftly and accurately transform currencies. In addition, our currency
converter offers real-time exchange rates, making it a valuable resource for both
travelers and financial enthusiasts. Experience the convenience of currency
conversion like never before, all with the click of a button.

Problem Statement:

The project endeavors to create a user-friendly web-based currency conversion


tool, meticulously developed through the integration of HTML, CSS, and
JavaScript. The primary challenge lies in facilitating seamless currency
conversion from one international denomination to another while ensuring a
visually engaging and intuitive user experience. Key objectives include
implementing a responsive design, offering real-time exchange rate data,
providing accurate and up-to-date currency conversion calculations, and
ensuring cross-browser compatibility. Specific challenges to address involve
sourcing reliable currency exchange rate data, developing a secure connection
for currency transactions, creating an appealing and informative user interface,
and optimizing performance for swift and efficient conversions. Moreover, the
project seeks to establish a solid foundation for future scalability,
accommodating additional currencies and enhancing the tool's utility for a global
user base.

Page 3
Hardware Requirements:

• Computer with at least 4 GB of RAM to ensure smooth performance.


• Dual-core processor or higher to provide reasonable processing power for
running the text editor efficiently.
• Display with a minimum resolution of 1366x768 to offer a comfortable
workspace for text editing and interaction with the application.

Software Requirements:

1.A code editor or integrated development environment (IDE) for writing


.HTML, CSS, and JavaScript. Popular choices include Visual Studio Code,

2.A modern web browser for testing and debugging your game. Google
Chrome, Mozilla Firefox, and Microsoft Edge are commonly used for web
development.

Page 4
Source code:
<!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=swa
p’);

*{

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”);

Page 5
}

::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%;

Page 6
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;

Page 7
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;

Page 8
}

.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;

Page 9
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”>

Page 10
<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>

Page 11
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”,

Page 12
“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”,

Page 13
“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”,

Page 14
“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”,

Page 15
“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”,

Page 16
“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”,

Page 17
“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”,

Page 18
“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);

});

Page 19
}

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”){

Page 20
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>

Page 21
OUTPUT:

Page 22
CONCLUSION:
In summary, this project has successfully harnessed the power of HTML, CSS,
and JavaScript to create an intuitive and efficient currency conversion tool. The
HTML framework provides a solid foundation for user interaction, while CSS
styling ensures a visually appealing and engaging interface. The JavaScript
functionality drives the core mechanics, allowing users to seamlessly convert
currencies in real-time, enhancing their financial decision-making. Our project
not only addresses the technical challenges of sourcing reliable currency
exchange rates and providing accurate calculations but also strives to offer a
secure and responsive platform for users worldwide. By enabling easy, cross-
browser currency conversion, we’ve aimed to simplify the complexities of
international finance and enhance the user experience. With this project, we’ve
not only met our objectives but also laid the groundwork for future
enhancements, including support for additional currencies and user-centric
features. It serves as a testament to the potential of these technologies to create
practical and interactive web-based tools that empower users in today’s global
economy.

Reference:
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

Page 23

You might also like