Конвертер величин: JavaScript + Bootstrap 4

Этот простой конвертер величин создан с использованием 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. Для расширения функционала можно добавить обработку ошибок, валидацию ввода и другие преобразования величин.

Что будем искать? Например,программа