Этот простой конвертер величин создан с использованием JavaScript и Bootstrap 4. Описание процесса создания представлено по шагам.
Подготовка
Для работы необходимы текстовый редактор (например, Atom) и браузер (например, Google Chrome). Создайте папку (например, 3w) и файл index.html внутри неё. Для удобства написания HTML рекомендуется использовать Emmet (в Atom — установить пакет emmet).
HTML-структура
Базовая HTML-разметка, созданная с помощью Emmet (! и Tab):
<!DOCTYPE html>
<html>
<head>
<title>Конвертер величин на JavaScript</title>
<link rel="stylesheet" href="ссылка_на_bootstrap_css">
</head>
<body>
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="display-3 text-center">Конвертер величин</h1>
</div>
</div>
<form>
<div class="form-group">
<input type="number" id="kmInput" placeholder="Километры" class="form-control form-control-lg">
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<p id="metersOutput"></p>
</div>
</div>
<div class="card">
<div class="card-block">
<p id="cmOutput"></p>
</div>
</div>
<div class="card">
<div class="card-block">
<p id="mmOutput"></p>
</div>
</div>
</div>
<style>
h1 {
margin-top: 70px;
}
.card-block {
padding: 10px;
background-color: #333;
color: #fff;
margin-bottom: 10px;
}
.card-block:first-child {
background-color: #ff9800;
}
.card-block:nth-child(2) {
background-color: #007bff;
}
.card-block:nth-child(3) {
background-color: #28a745;
}
.card {
margin-bottom: 10px;
}
#output {
margin: 0 auto;
width: fit-content;
}
</style>
<script>
document.getElementById('kmInput').addEventListener('input', function(event) {
const km = parseFloat(event.target.value);
document.getElementById('metersOutput').innerHTML = km * 1000;
document.getElementById('cmOutput').innerHTML = km * 100000;
document.getElementById('mmOutput').innerHTML = km * 1000000;
document.getElementById('output').style.display = 'block';
});
document.getElementById('output').style.display = 'none';
</script>
</body>
</html>
Замените "ссылка_на_bootstrap_css" на актуальную ссылку на CSS-файлы Bootstrap 4.
JavaScript
Обработка событий и вычисления реализованы в блоке <script>, размещенном в конце <body>. Код обрабатывает событие input для поля ввода километров и вычисляет соответствующие значения в метрах, сантиметрах и миллиметрах. Результаты выводятся в блоки с id metersOutput, cmOutput и mmOutput.
Результат
Готовый конвертер — простое, но функциональное приложение, демонстрирующее основы работы с JavaScript и Bootstrap 4. Для расширения функционала можно добавить обработку ошибок, валидацию ввода и другие преобразования величин.