Я думаю, что я практичный человек, когда что-то изучаю, ну, мне нужна теория, это важно, но это только для моей основы, я плохо запоминаю, много практики приучает мой мозг к пониманию чего-то.

Поэтому мне было интересно, что я напишу много учебных примеров в своих сообщениях в блоге и поделился своими знаниями с вами. Я действительно надеюсь, что моя статья здесь поможет кому-то, кто изо всех сил пытался изучить JavaScript, выполняя множество практик.

Начнем погружение!

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ:
Пожалуйста, сначала сделайте это самостоятельно, прежде чем читать дальше о том, как я это сделал, потому что у каждого человека есть свое собственное решение, возможно, ваши коды отличаются от моих. но результат тот же.

Если в результате не возникнет ошибок или ошибок, я буду считать ваши коды правильными. Но разница в том, насколько эффективен ваш код, не утруждайте себя тем, чтобы сделать код эффективным, для этого нужен опыт, даже я могу сделать неэффективный код по мнению других людей. Давайте сначала сосредоточимся на ошибках и ошибках.

В сегодняшней статье я попрошу вас создать приложение Калькулятор чаевых с использованием JavaScript. Вот правила:

  1. У вас будет 3 поля ввода, первое — для ввода общего счета, второе — раскрывающийся список для выбора «Как прошла услуга», а последнее — «Сколько людей разделяет счет?».
  2. Поле ввода «Общая сумма счета» является числовым полем и не должно иметь пустого значения. Если вы отправите его с пустым значением, оно уведомит пользователя о «Недопустимом значении».
  3. Поле How was the service представляет собой раскрывающийся список с 5 вариантами:
    1. Отлично, значение 30 %
    2. Хорошо, 20 %
    3. Удовлетворительно, 15 %. %
    4. Плохо, 10%
    5. Ужасно, 5%
  4. Как значение службы по умолчанию было удовлетворительным, и оно также не должно иметь значение 0, если каким-то образом имеет значение 0, оно предупредит пользователя с «Недопустимым значением»
  5. Сколько человек разделяет счет? является числовым полем и не должно иметь пустого значения. Если вы отправляете его с пустым значением, оно будет предупреждать пользователя о «Недопустимом значении».
  6. в представлении сумма чаевых будет отображаться следующим образом: «Сумма чаевых: $ X.XX каждая», X — это цифра, а позади нее две цифры.
  7. чтобы рассчитать чаевые, используйте следующую формулу: (Сумма счета * Качество обслуживания) / Общее количество людей, поделившихся

Удачи!

Ответ:

Прежде чем мы начнем создавать калькулятор чаевых, нам нужно настроить нашу среду. Мы будем использовать HTML, CSS и JavaScript, поэтому вам понадобится текстовый редактор и веб-браузер. Вы можете использовать любой текстовый редактор по вашему выбору, например Visual Studio Code, Sublime Text или Notepad++.

Шаг 1: Базовая структура

Для начала создайте новую папку на своем компьютере, где вы будете хранить файлы проекта. Внутри папки создайте новый файл с именем index.html. Откройте этот файл в текстовом редакторе и добавьте следующий код:

<!DOCTYPE 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>Tip Calculator</title>    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Tip Calculator</h1>

    <script src="script.js"></script>
  </body>
</html>

Этот код HTML устанавливает базовую структуру нашей веб-страницы, включая заголовок, ссылку на таблицу стилей CSS и тег скрипта, который будет ссылаться на наш файл JavaScript.

Затем создайте новый файл с именем style.css в той же папке и добавьте следующий код:

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 30px;
}

input[type="number"] {
  width: 100px;
  padding: 5px;
  margin: 10px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Этот код CSS устанавливает базовый стиль для нашей веб-страницы, включая шрифт, выравнивание и форматирование полей ввода и кнопки.

Наконец, создайте новый файл с именем script.js в той же папке и пока оставьте его пустым. Сюда мы позже добавим наш код JavaScript.

Шаг 2: Создайте HTML-форму

Теперь, когда мы настроили нашу среду, мы можем создать HTML-форму для нашего калькулятора чаевых. Внутри тега <body> нашего файла index.html добавьте следующий код:

  <h2>Enter Bill Total:</h2>
  <input type="number" id="billAmount" placeholder="Bill Total" required>

  <h2>How was the service?</h2>
  <select id="serviceQuality">
    <option value="0.3">Excellent - 30%</option>
    <option value="0.2">Good - 20%</option>
    <option value="0.15" selected>Satisfactory - 15%</option>
    <option value="0.1">Bad - 10%</option>
    <option value="0.05">Terrible - 5%</option>
  </select>

  <h2>How many people are sharing the bill?</h2>
  <input type="number" id="totalPeople" placeholder="Total People" required>

  <br><br>
  <button id="calculateBtn">Calculate Tip</button>

  <br><br>
  <div id="tipAmount"></div>

Этот код создает форму с тремя полями ввода для общей суммы счета, качества обслуживания и общего количества людей, разделяющих счет. Он также включает кнопку для расчета чаевых и div для отображения рассчитанной суммы чаевых.

Шаг 3: Напишите код JavaScript

Теперь, когда мы настроили нашу среду и создали HTML-форму, мы можем написать код JavaScript для расчета суммы чаевых.

Внутри файла script.js добавьте следующий код:

function calculateTip() {
  // Get the input values
  const billAmount = document.getElementById("billAmount").value;
  const serviceQuality = document.getElementById("serviceQuality").value;
  const totalPeople = document.getElementById("totalPeople").value;

  // Validate the input values
  if (
    billAmount === "" ||
    serviceQuality === "0" ||
    totalPeople === "" ||
    totalPeople === "0"
  ) {
    alert("Please enter valid values.");
    return;
  }

  // Calculate the tip amount
  const tipAmount = (billAmount * serviceQuality) / totalPeople;

  // Display the tip amount
  document.getElementById(
    "tipAmount"
  ).innerHTML = `Tip Amount: $${tipAmount.toFixed(2)} each`;
}

// Add event listener to the button
document.getElementById("calculateBtn").addEventListener("click", calculateTip);

Разберем этот код:

  1. Мы определяем функцию с именем calculateTip, которая будет запускаться при нажатии кнопки.
  2. Внутри функции мы используем document.getElementById для получения входных значений из HTML-формы и сохранения их в переменных.
  3. Мы проверяем входные значения, чтобы убедиться, что пользователь ввел допустимые значения. Если какое-либо из полей ввода пусто или качество обслуживания установлено на 0, мы выводим предупреждающее сообщение и возвращаемся из функции.
  4. Если введенные значения верны, мы рассчитываем сумму чаевых по формуле (billAmount * serviceQuality) / totalPeople.
  5. Мы используем toFixed(2) для округления суммы чаевых до двух знаков после запятой.
  6. Мы обновляем HTML-содержимое элемента tipAmount, чтобы отобразить рассчитанную сумму чаевых.
  7. Наконец, мы добавляем прослушиватель событий к кнопке вычисления, который будет запускать функцию calculateTip при нажатии кнопки.

Шаг 4: протестируйте калькулятор чаевых

Теперь, когда мы написали код JavaScript, мы можем протестировать наш Калькулятор чаевых, чтобы убедиться, что он работает правильно.

Откройте файл index.html в веб-браузере и введите несколько значений в поля ввода. Нажмите кнопку Calculate Tip и проверьте, правильно ли рассчитывается сумма чаевых и отображается ли она в разделе tipAmount.

Если все работает как положено, поздравляем! Вы успешно создали калькулятор чаевых на JavaScript.

БОНУС: Полный код

HTML

<!DOCTYPE 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>Tip Calculator</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Tip Calculator</h1>

    <h2>Enter Bill Total:</h2>
    <input type="number" id="billAmount" placeholder="Bill Total" required />

    <h2>How was the service?</h2>
    <select id="serviceQuality">
      <option value="0.3">Excellent - 30%</option>
      <option value="0.2">Good - 20%</option>
      <option value="0.15" selected>Satisfactory - 15%</option>
      <option value="0.1">Bad - 10%</option>
      <option value="0.05">Terrible - 5%</option>
    </select>

    <h2>How many people are sharing the bill?</h2>
    <input type="number" id="totalPeople" placeholder="Total People" required />

    <br /><br />
    <button id="calculateBtn">Calculate Tip</button>

    <br /><br />
    <div id="tipAmount"></div>

    <script src="script.js"></script>
  </body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 30px;
}

input[type="number"] {
  width: 100px;
  padding: 5px;
  margin: 10px;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript

function calculateTip() {
  // Get the input values
  const billAmount = document.getElementById("billAmount").value;
  const serviceQuality = document.getElementById("serviceQuality").value;
  const totalPeople = document.getElementById("totalPeople").value;

  // Validate the input values
  if (
    billAmount === "" ||
    serviceQuality === "0" ||
    totalPeople === "" ||
    totalPeople === "0"
  ) {
    alert("Please enter valid values.");
    return;
  }

  // Calculate the tip amount
  const tipAmount = (billAmount * serviceQuality) / totalPeople;

  // Display the tip amount
  document.getElementById(
    "tipAmount"
  ).innerHTML = `Tip Amount: $${tipAmount.toFixed(2)} each`;
}

// Add event listener to the button
document.getElementById("calculateBtn").addEventListener("click", calculateTip);

Это все, ребята, я надеюсь, что это поможет вам получить больше практики, чтобы отточить свои навыки JavaScript.

Если вы считаете, что этот пост полезен, пожалуйста, поддержите меня в «Купи мне кофе, это действительно много значит для меня, и я буду публиковать больше таких постов.