<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exchange Rate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="img/money.png" alt="money" class="money-img">
<h1>Exchange Rate</h1>
<div class="container">
<div class="currency">
<select id="currency-one">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-one" placeholder="0" value="1">
</div>
<div class="swap-rate-container">
<button class="btn" id="swap">Swap</button>
<div class="rate" id="rate"></div>
</div>
<div class="currency">
<select id="currency-two">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY" selected>CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="text" id="amount-two" placeholder="0" disabled>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
// Get elements
const currencyElementOne = document.getElementById('currency-one');
const currencyElementTwo = document.getElementById('currency-two');
const amountElementOne = document.getElementById('amount-one');
const amountElementTwo = document.getElementById('amount-two');
const rateElement = document.getElementById('rate');
const swap = document.getElementById('swap');
// Fetch exchange rates and update the DOM
function calculate() {
const currencyOne = currencyElementOne.value;
const currencyTwo = currencyElementTwo.value;
fetch(`https://v6.exchangerate-api.com/v6/a98fd9e1a20fb119ac3b940e/latest/${currencyOne}`)
.then(res => res.json())
.then(data => {
const rate = data.conversion_rates[currencyTwo];
rateElement.innerText = `1 ${currencyOne} = ${rate} ${currencyTwo}`;
amountElementTwo.value = (amountElementOne.value * rate).toFixed(2);
});
// fetch(`https://api.exchangerate-api.com/v4/latest/${currencyOne}`)
// .then(res => res.json())
// .then(data => {
// const rate = data.rates[currencyTwo];
//
// rateElement.innerText = `1 ${currencyOne} = ${rate} ${currencyTwo}`;
//
// amountElementTwo.value = (amountElementOne.value * rate).toFixed(2);
// });
}
// Event listeners
currencyElementOne.addEventListener('change', calculate);
currencyElementTwo.addEventListener('change', calculate);
amountElementOne.addEventListener('input', calculate);
amountElementTwo.addEventListener('input', calculate);
swap.addEventListener('click', () => {
const temp = currencyElementOne.value;
currencyElementOne.value = currencyElementTwo.value;
currencyElementTwo.value = temp;
calculate();
});
calculate();
:root {
--primary-color: steelblue;
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 20px;
}
h1 {
color: var(--primary-color);
text-shadow: 1px 1px 2px #4c4c4c;
}
p {
text-align: center;
}
.btn {
color: #fff;
background-color: var(--primary-color);
cursor: pointer;
border: 1px solid #7a7a7a;
box-shadow: 2px 2px #4c4c4c;
border-radius: 5px;
font-size: 12px;
padding: 8px 12px;
}
.btn:hover {
box-shadow: 3px 3px #4c4c4c;
}
.btn:active {
transform: translate(1px, 1px);
box-shadow: 2px 2px #4c4c4c;
}
.money-img {
width: 200px;
}
.currency {
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.currency select {
padding: 10px 20px 10px 20px;
border: 1px solid #dedede;
font-size: 16px;
background: transparent;
}
.currency input {
border: 0;
background: transparent;
font-size: 30px;
text-align: right;
}
.swap-rate-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.rate {
color: var(--primary-color);
font-size: 14px;
padding: 0 10px;
}
select:focus,
input:focus,
button:focus {
outline: 0;
}
@media(max-width: 600px) {
.currency input {
width: 200px;
}
}
扫一扫
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
