В этой статье мы создадим простой конвертер валют, используя HTML и JavaScript. Прежде чем мы начнем, все должны быть знакомы с тем, что такое API и как мы можем использовать их для получения самых последних обменных курсов, потому что мы будем использовать exchangerate-api.com для получения курсов конвертации в реальном времени. Какова цель нынешнего конвертера валют и как мы можем его создать?
Приложение для конвертации валют с использованием HTML, CSS и JavaScript[/caption]
Что такое API?
Интерфейс прикладного программирования или API — это то, что он означает. Приложения — это любые части программного обеспечения с определенной целью при обращении к API. Контракт на обслуживание между двумя приложениями можно сравнить с интерфейсом. Используя запросы и ответы, это соглашение определяет, как они будут разговаривать друг с другом. Как разработчики должны стилизовать запросы и ответы, описано в их документации по API.
Что такое конвертер валют?
Конвертер валют — это устройство, которое облегчает обмен одной валюты на другую. Например, вам нужно будет использовать конвертер валют, чтобы обменять доллары США на евро, если вы путешествуете в Европу из Соединенных Штатов.
Предпосылки:
index.html — для добавления структуры в проект
styles.css: для добавления стиля в проект
script.js — для добавление функций перетаскивания или просмотра
Надеюсь, теперь у вас есть общее представление о том, что влечет за собой проект. В нашей статье мы рассмотрим этот проект шаг за шагом.
Шаг 1: Добавление базового HTML-кода
HTML означает язык гипертекстовой разметки. Это язык разметки. Его основная задача — дать структуру нашему проекту. Мы предоставим структуру нашего проекта, используя этот язык разметки. Итак, давайте посмотрим на наш HTML-код.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>currency-convertor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Awesome Currency Converter</h1>
<p class="convert">
Convert :
<input type="number" id="original-currency-amount" placeholder="0" value="1"> </input>
</p>
<div>
<select id="from_currency">
<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>
<button id="exchange">
<i class="fas fa-exchange-alt"></i>
</button>
<select id="to_currency">
<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" selected>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>
</div>
<p class="exchange">
Exchange Rate:
<input type="text" id="exchange-rate"></input>
</p>
<button id="exchange_button">Exchange my money now!</button>
<p id="output-text">
<span id="from"></span> converted to <span id="to"></span>
</p>
<footer><a href="https://instagram.com/codewith_random?igshid=YmMyMTA2M2Y=" title="share"><i
class="fab fa-instagram"></i></a></footer>
<script src="index.js"></script>
</body>
</html>
Мы подробно рассмотрим наш проект. Мы покажем, как добавить каждый компонент в структуру, которую мы уже построили для нашего конвертера валют.
Мы начнем с того, что дадим нашему проекту заголовок. Тег h1 будет использоваться для добавления заголовков в наш проект. Теперь мы создадим поле для ввода пользователем суммы денег, которую он хочет обменять, используя тег ввода.
<h1>Awesome Currency Converter</h1>
<p class="convert">
Convert :
<input type="number" id="original-currency-amount" placeholder="0" value="1"> </input>
</p>
В мире много наций, и у каждой из них есть своя валюта. В результате мы должны сначала составить список всех валют, чтобы получить обменные курсы для каждой страны. Используя опцию выбора, мы создадим два списка опций для разных валют и вставим значок обмена между двумя списками, используя значки с потрясающим шрифтом.
<div>
<select id="from_currency">
<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>
<button id="exchange">
<i class="fas fa-exchange-alt"></i>
</button>
<select id="to_currency">
<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" selected>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>
</div>
Теперь мы создадим панель, которая показывает обменный курс вместе с кнопкой обмена. Пользователь увидит текущий обменный курс, как только нажмет кнопку благодаря коду javascript. Если вы хотите подписаться на нас в Instagram для новых интерфейсных проектов, мы покажем значок Instagram со ссылкой с использованием значка с потрясающим шрифтом.
<p class="exchange">
Exchange Rate:
<input type="text" id="exchange-rate"></input>
</p>
<button id="exchange_button">Exchange my money now!</button>
<p id="output-text">
<span id="from"></span> converted to <span id="to"></span>
</p>
<footer><a href="https://instagram.com/codewith_random?igshid=YmMyMTA2M2Y=" title="share"><i
class="fab fa-instagram"></i></a></footer>
<script src="index.js"></script>
</body>
</html>
Теперь мы добавили базовую структуру нашей веб-страницы. Теперь мы будем использовать нашу таблицу стилей для добавления стилей в наш конвертер валют, но сначала давайте посмотрим на наш результат.
Выход:
Приложение «Конвертер валют» с предварительным просмотром HTML-кода[/caption]
Шаг 2: Добавление кода CSS
Классы, которые мы определили внутри нашего html-элемента, будут в основном использоваться для стилизации нашей структуры в будущем. Однако для того, чтобы придать каждой части в этом посте привлекательный вид, мы также использовали в этом проекте селектор Id.
@import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap");
html,
body {
margin: 0;
padding: 0;
}
body {
text-align: center;
font-family: sans-serif;
background-color: #00539cff;
display: flex;
height: 80vh;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 50px;
}
h1 {
color: #ffd662ff;
font-size: 3rem;
}
.convert,
.exchange {
font-family: "Sansita Swashed", cursive;
font-size: 25px;
color: #ffffff;
padding-right: 20px;
}
input {
width: 150px;
height: 30px;
font-size: 20px;
margin: 5px auto;
outline: 0;
}
#original-currency-amount {
padding-left: 50px;
}
button {
width: 300px;
height: 40px;
font-size: 20px;
font-weight: 600;
color: #00539cff;
font-family: "Sansita Swashed", cursive;
}
select {
width: 80px;
height: 35px;
font-size: 20px;
text-align: center;
padding-left: 10px;
outline: 0;
}
#exchange {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 20px;
outline: 0;
color: #00539cff;
border: 4px solid #ffd662ff;
}
#exchange:active,
button:active {
transform: scale(0.9);
}
#output-text {
display: none;
padding: 20px;
font-size: 30px;
color: #ffffff;
}
span {
color: #ffd662ff;
font-size: 35px;
}
#exchange-rate {
cursor: default;
}
footer {
position: absolute;
right: 50px;
bottom: 50px;
}
a {
color: #ffffff;
bottom: 0;
font-size: 30px;
text-decoration: none;
}
Чтобы создать визуально привлекательный компонент HTML, необходим код CSS. Конвертер валют стилизован с использованием этого атрибута CSS. Вам, ребята, будет легко понять, если мы шаг за шагом проведем вас через стилизацию.
Шаг 1.Сначала будут добавлены шрифты Sansita и Swashed из Google Fonts с помощью ссылки для импорта.
Мы установим padding и margin на «ноль» с помощью селектора тега body.
Теперь, когда у нас есть тело, мы стилизуем тело веб-страницы. Дисплей настроен на гибкость, и мы добавили 50-пиксельный отступ вверху. Мы центрировали весь текст с помощью свойства text-align, а с помощью свойства цвета фона мы создадим синий фон. В качестве высоты указано 80 vh.
@import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap");
html,
body {
margin: 0;
padding: 0;
}
body {
text-align: center;
font-family: sans-serif;
background-color: #00539cff;
display: flex;
height: 80vh;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 50px;
}
Приложение для конвертации валют с использованием HTML, CSS и JavaScript[/caption]
Шаг 2. Используя селектор тегов ‹h1›, мы теперь стилизуем наш заголовок. Желтый теперь заменяет первоначальный цвет, а размер теперь 3 бэр.
Теперь, когда мы добавили стили к нашим полосам отображения конвертации и обмена с помощью селектора классов (.convert,.exchange), мы добавим в наш проект шрифт «Sanista Swashed», используя атрибут font-family. Белый — выбранный цвет шрифта, размер шрифта — 25 пикселей.
Мы установим размер шрифта на 20 пикселей, высоту на 30 пикселей и ширину на 150 пикселей, используя ввод селектора тегов. Было вставлено поле размером 5 пикселей и 20 пикселей.
.convert,
.exchange {
font-family: "Sansita Swashed", cursive;
font-size: 25px;
color: #ffffff;
padding-right: 20px;
}
input {
width: 150px;
height: 30px;
font-size: 20px;
margin: 5px auto;
outline: 0;
}
#original-currency-amount {
padding-left: 50px;
}
Приложение для конвертации валют с использованием HTML, CSS и JavaScript[/caption]
Шаг 3.Кнопке теперь будет добавлен стиль вместе с опцией выбора. Ширина и высота кнопки установлены на 300 пикселей и 40 пикселей соответственно. Мы увеличим размер шрифта до 20 пикселей, увеличим жирность до 600 и изменим цвет текста кнопки на синий, используя px и установив свойство fproperty.
Ширина и высота значка устанавливаются на 50 пикселей с помощью селектора идентификатора (#exchange), и мы будем использовать свойство border-radius, чтобы установить радиус границы на 50%. Граница сплошного желтого цвета толщиной 4 пикселя, а текст должен быть синим.
button {
width: 300px;
height: 40px;
font-size: 20px;
font-weight: 600;
color: #00539cff;
font-family: "Sansita Swashed", cursive;
}
select {
width: 80px;
height: 35px;
font-size: 20px;
text-align: center;
padding-left: 10px;
outline: 0;
}
#exchange {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 20px;
outline: 0;
color: #00539cff;
border: 4px solid #ffd662ff;
}
#exchange:active,
button:active {
transform: scale(0.9);
}
#output-text {
display: none;
padding: 20px;
font-size: 30px;
color: #ffffff;
}
span {
color: #ffd662ff;
font-size: 35px;
}
#exchange-rate {
cursor: default;
}
Приложение для конвертации валют с использованием HTML, CSS и JavaScript[/caption]
Шаг 4.Последний шаг — добавление дизайна к значку Instagram внизу. У нас установлено абсолютное положение, и, используя правильный атрибут, мы переместим его на 50 пикселей вправо и вниз и изменим его цвет на белый.
footer {
position: absolute;
right: 50px;
bottom: 50px;
}
a {
color: #ffffff;
bottom: 0;
font-size: 30px;
text-decoration: none;
}
Шаг 3: Код JavaScript
var input_amount = document.getElementById("original-currency-amount");
var from_currency = document.getElementById("from_currency");
var to_currency = document.getElementById("to_currency");
var exchange_rate = document.getElementById("exchange-rate");
var exchange = document.getElementById("exchange");
var output_amount = document.getElementById("output-text");
var output_from = document.getElementById("from");
var output_to = document.getElementById("to");
exchange.addEventListener("click", () => {
[from_currency.value, to_currency.value] = [
to_currency.value,
from_currency.value,
];
calculate();
});
var to_amount = 0;
function calculate() {
const from_currency_value = from_currency.value;
const to_currency_value = to_currency.value;
fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency_value}`)
.then((res) => res.json())
.then((res) => {
const rate = res.rates[to_currency_value];
exchange_rate.value = `${rate}`;
to_amount = (input_amount.value * rate).toFixed(3);
output_from.innerText = `${input_amount.value} ${from_currency_value}`;
output_to.innerText = `${to_amount} ${to_currency_value}`;
output_amount.style.display = "block";
});
}
document.getElementById("exchange_button").addEventListener("click", () => {
calculate();
});
- Используя метод документа getElementById(), мы сначала выберем наши HTML-элементы, а затем создадим некоторые переменные и сохраним их там.
- Теперь мы будем использовать эту переменную для добавления прослушивателя событий в наш HTML. Добавьте прослушиватель событий с помощью addEventlistener. Как только пользователь нажмет на значок обмена, мы добавим событие клика, которое приведет к конвертации значений валюты друг в друга. Мы также добавим функцию к нашему событию клика.
- Теперь мы создадим переменную to_amount и установим для нее значение «ноль».
- Теперь мы создадим функцию calculate() внутри функции, которую мы создадим для переменной, и внутри этой переменной мы будем получать значение из валюты. Здесь мы использовали метод fetch(), чтобы сделать запрос API для выбранной основной валюты. Если запрос был успешным, мы передаем значения frmo api элементу HTML, после чего они будут отображаться пользователю.
- Теперь мы выберем кнопку обмена с помощью метода document.getelementbyId() и добавим щелчок EventListener для вызова функции расчета.
Теперь мы завершили наш Конвертер валют с использованием HTML, CSS и javascript. Надеюсь, вы поняли весь проект.
Если вы обнаружите, что этот блог полезен, обязательно поищите в Google код со случайным кодом для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.
Следуйте: codewithrandom
Написал: Арун
Код: RAJ