Создайте конвертер валют с помощью JavaScript
В этом уроке мы создадим конвертер валют с использованием JavaScript, который легко конвертирует валюту в валюту любой другой страны. Прежде чем мы начнем, каждый должен знать, что такое API и как их использовать для получения самых последних обменных курсов, поскольку мы будем использовать api.exchangerate-api.com для получения информации в реальном времени. курсы конвертации валют. Какова цель преобразователя тока и как его сделать?
См. также
Как преобразовать числа в слова с помощью PHP
Что такое конвертер валют?
Конвертер валют – это инструмент, позволяющий конвертировать одну валюту в другую. Например, если вы из США и путешествуете в Европу, вам нужно будет использовать конвертер валют для конвертации долларов США в евро.
Создать валюту обмена HTML-дизайна
HTML означает язык гипертекстовой разметки. Это язык разметки. Его главная задача — структурировать наш проект. Мы структурируем наш проект с помощью этого языка разметки. Итак, давайте посмотрим на наш HTML-код.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Create a Currency Converter using JavaScript</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- linking style.css file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Currency Converter -->
<h1 class="heading text-center">
Currency Converter
</h1>
<hr>
<div class="container">
<div class="main">
<div class="form-group">
<label for="amount">Amount to Convert :</label>
<input type="text" class="form-control searchBox" placeholder="0.00" id="amount" required>
</div>
<div class="row">
<div class="col-sm-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">From</span>
</div>
<?php
include_once "countryList.php";
?>
<select class="form-control from" id="sel1">
<option value="">Select Country</option>
<?php foreach ($currency_list as $code => $countryName) { ?>
<option value="<?php echo $code ?>"><?php echo $countryName; ?> (<?php echo $code; ?>)</option>
<?php } ?>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">To</span>
</div>
<select class="form-control to" id="sel2">
<option value="">Select Country</option>
<?php foreach ($currency_list as $code => $countryName) { ?>
<option value="<?php echo $code ?>"><?php echo $countryName; ?> (<?php echo $code; ?>)</option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="text-center">
<!-- convert button -->
<button type="submit" class="btn btn-success convert m-2">
Convert
</button>
</div>
</div>
<div id="finalAmount" class="text-center">
<!-- Display the converted amount -->
<h2>Converted Amount :
<span class="finalValue" style="color:green;"></span>
</h2>
</div>
</div>
<!-- linking script.js file -->
<script src="script.js"></script>
</body>
</html>
PHP-массив всех названий, кодов и символов валют
В этом файле все названия валют и список кодов в массиве PHP. Название, код и символы валюты PHP. Вы также можете перейти на страницу github.
countryList.php
<?php
// count 168
$currency_list = array(
"AFA" => "Afghan Afghani",
"ALL" => "Albanian Lek",
"DZD" => "Algerian Dinar",
"AOA" => "Angolan Kwanza",
"ARS" => "Argentine Peso",
"AMD" => "Armenian Dram",
"AWG" => "Aruban Florin",
"AUD" => "Australian Dollar",
"AZN" => "Azerbaijani Manat",
"BSD" => "Bahamian Dollar",
"BHD" => "Bahraini Dinar",
"BDT" => "Bangladeshi Taka",
"BBD" => "Barbadian Dollar",
"BYR" => "Belarusian Ruble",
"BEF" => "Belgian Franc",
"BZD" => "Belize Dollar",
"BMD" => "Bermudan Dollar",
"BTN" => "Bhutanese Ngultrum",
"BTC" => "Bitcoin",
"BOB" => "Bolivian Boliviano",
"BAM" => "Bosnia-Herzegovina Convertible Mark",
"BWP" => "Botswanan Pula",
"BRL" => "Brazilian Real",
"GBP" => "British Pound Sterling",
"BND" => "Brunei Dollar",
"BGN" => "Bulgarian Lev",
"BIF" => "Burundian Franc",
"KHR" => "Cambodian Riel",
"CAD" => "Canadian Dollar",
"CVE" => "Cape Verdean Escudo",
"KYD" => "Cayman Islands Dollar",
"XOF" => "CFA Franc BCEAO",
"XAF" => "CFA Franc BEAC",
"XPF" => "CFP Franc",
"CLP" => "Chilean Peso",
"CLF" => "Chilean Unit of Account",
"CNY" => "Chinese Yuan",
"COP" => "Colombian Peso",
"KMF" => "Comorian Franc",
"CDF" => "Congolese Franc",
"CRC" => "Costa Rican Colón",
"HRK" => "Croatian Kuna",
"CUC" => "Cuban Convertible Peso",
"CZK" => "Czech Republic Koruna",
"DKK" => "Danish Krone",
"DJF" => "Djiboutian Franc",
"DOP" => "Dominican Peso",
"XCD" => "East Caribbean Dollar",
"EGP" => "Egyptian Pound",
"ERN" => "Eritrean Nakfa",
"EEK" => "Estonian Kroon",
"ETB" => "Ethiopian Birr",
"EUR" => "Euro",
"FKP" => "Falkland Islands Pound",
"FJD" => "Fijian Dollar",
"GMD" => "Gambian Dalasi",
"GEL" => "Georgian Lari",
"DEM" => "German Mark",
"GHS" => "Ghanaian Cedi",
"GIP" => "Gibraltar Pound",
"GRD" => "Greek Drachma",
"GTQ" => "Guatemalan Quetzal",
"GNF" => "Guinean Franc",
"GYD" => "Guyanaese Dollar",
"HTG" => "Haitian Gourde",
"HNL" => "Honduran Lempira",
"HKD" => "Hong Kong Dollar",
"HUF" => "Hungarian Forint",
"ISK" => "Icelandic Króna",
"INR" => "Indian Rupee",
"IDR" => "Indonesian Rupiah",
"IRR" => "Iranian Rial",
"IQD" => "Iraqi Dinar",
"ILS" => "Israeli New Sheqel",
"ITL" => "Italian Lira",
"JMD" => "Jamaican Dollar",
"JPY" => "Japanese Yen",
"JOD" => "Jordanian Dinar",
"KZT" => "Kazakhstani Tenge",
"KES" => "Kenyan Shilling",
"KWD" => "Kuwaiti Dinar",
"KGS" => "Kyrgystani Som",
"LAK" => "Laotian Kip",
"LVL" => "Latvian Lats",
"LBP" => "Lebanese Pound",
"LSL" => "Lesotho Loti",
"LRD" => "Liberian Dollar",
"LYD" => "Libyan Dinar",
"LTC" => "Litecoin",
"LTL" => "Lithuanian Litas",
"MOP" => "Macanese Pataca",
"MKD" => "Macedonian Denar",
"MGA" => "Malagasy Ariary",
"MWK" => "Malawian Kwacha",
"MYR" => "Malaysian Ringgit",
"MVR" => "Maldivian Rufiyaa",
"MRO" => "Mauritanian Ouguiya",
"MUR" => "Mauritian Rupee",
"MXN" => "Mexican Peso",
"MDL" => "Moldovan Leu",
"MNT" => "Mongolian Tugrik",
"MAD" => "Moroccan Dirham",
"MZM" => "Mozambican Metical",
"MMK" => "Myanmar Kyat",
"NAD" => "Namibian Dollar",
"NPR" => "Nepalese Rupee",
"ANG" => "Netherlands Antillean Guilder",
"TWD" => "New Taiwan Dollar",
"NZD" => "New Zealand Dollar",
"NIO" => "Nicaraguan Córdoba",
"NGN" => "Nigerian Naira",
"KPW" => "North Korean Won",
"NOK" => "Norwegian Krone",
"OMR" => "Omani Rial",
"PKR" => "Pakistani Rupee",
"PAB" => "Panamanian Balboa",
"PGK" => "Papua New Guinean Kina",
"PYG" => "Paraguayan Guarani",
"PEN" => "Peruvian Nuevo Sol",
"PHP" => "Philippine Peso",
"PLN" => "Polish Zloty",
"QAR" => "Qatari Rial",
"RON" => "Romanian Leu",
"RUB" => "Russian Ruble",
"RWF" => "Rwandan Franc",
"SVC" => "Salvadoran Colón",
"WST" => "Samoan Tala",
"STD" => "São Tomé and Príncipe Dobra",
"SAR" => "Saudi Riyal",
"RSD" => "Serbian Dinar",
"SCR" => "Seychellois Rupee",
"SLL" => "Sierra Leonean Leone",
"SGD" => "Singapore Dollar",
"SKK" => "Slovak Koruna",
"SBD" => "Solomon Islands Dollar",
"SOS" => "Somali Shilling",
"ZAR" => "South African Rand",
"KRW" => "South Korean Won",
"SSP" => "South Sudanese Pound",
"XDR" => "Special Drawing Rights",
"LKR" => "Sri Lankan Rupee",
"SHP" => "St. Helena Pound",
"SDG" => "Sudanese Pound",
"SRD" => "Surinamese Dollar",
"SZL" => "Swazi Lilangeni",
"SEK" => "Swedish Krona",
"CHF" => "Swiss Franc",
"SYP" => "Syrian Pound",
"TJS" => "Tajikistani Somoni",
"TZS" => "Tanzanian Shilling",
"THB" => "Thai Baht",
"TOP" => "Tongan Pa'anga",
"TTD" => "Trinidad & Tobago Dollar",
"TND" => "Tunisian Dinar",
"TRY" => "Turkish Lira",
"TMT" => "Turkmenistani Manat",
"UGX" => "Ugandan Shilling",
"UAH" => "Ukrainian Hryvnia",
"AED" => "United Arab Emirates Dirham",
"UYU" => "Uruguayan Peso",
"USD" => "US Dollar",
"UZS" => "Uzbekistan Som",
"VUV" => "Vanuatu Vatu",
"VEF" => "Venezuelan BolÃvar",
"VND" => "Vietnamese Dong",
"YER" => "Yemeni Rial",
"ZMK" => "Zambian Kwacha",
"ZWL" => "Zimbabwean dollar"
);
?>
Создать страницу CSS для стиля
Страница CSS для оформления HTML-страницы для оформления страницы конвертации валюты.
стиль.css
.heading {
font-family: 'Roboto slab' sans-serif;
margin: 35px auto 20px;
font-weight: 600;
font-size: 60px;
}
hr {
border-top: 2px solid black;
width: 50%;
margin-bottom: 55px;
}
.main {
width: 50vw;
margin: auto;
padding: 30px;
border-radius: 5px;
background: rgb(87,87,192);
background: linear-gradient(45deg, rgba(87,87,192,1) 21%, rgba(136,132,202,1) 100%, rgba(0,212,255,1) 100%);
color: white;
}
label {
font-size: 20px;
}
.btn {
width: 200px;
}
#finalAmount {
font-family: 'Roboto slab' sans-serif;
display: none;
margin: 50px auto;
}
#finalAmount h2 {
font-size: 50px;
}
.finalValue {
font-family: 'Roboto slab' sans-serif;
}
Создать страницу JavaScript
На этой странице мы создадим API-интерфейс Exchangerate-api.com JavaScript для конвертации текущей валюты в любую страну с использованием API JavaScript.
script.js
// Include api for currency change
const api = "https://api.exchangerate-api.com/v4/latest/USD";
// For selecting different controls
let search = document.querySelector(".searchBox");
let convert = document.querySelector(".convert");
let fromCurrecy = document.querySelector(".from");
let toCurrecy = document.querySelector(".to");
let finalValue = document.querySelector(".finalValue");
let finalAmount = document.getElementById("finalAmount");
let resultFrom;
let resultTo;
let searchValue;
// Event when currency is changed
fromCurrecy.addEventListener('change', (event) => {
resultFrom = `${event.target.value}`;
});
// Event when currency is changed
toCurrecy.addEventListener('change', (event) => {
resultTo = `${event.target.value}`;
});
search.addEventListener('input', updateValue);
// Function for updating value
function updateValue(e) {
searchValue = e.target.value;
}
// When user clicks, it calls function getresults
convert.addEventListener("click", getResults);
// Function getresults
function getResults() {
fetch(`${api}`)
.then(currency => {
return currency.json();
}).then(displayResults);
}
// Display results after conversion
function displayResults(currency) {
let fromRate = currency.rates[resultFrom];
let toRate = currency.rates[resultTo];
finalValue.innerHTML = ((toRate / fromRate) * searchValue).toFixed(2);
finalAmount.style.display = "block";
}
Пожалуйста, нажмите на ссылку, чтобы увидеть больше сообщений в блоге.
https://webscodex.com/how-to-create-currency-converter-javascript/
