Я думаю, что я практичный человек, когда что-то изучаю, ну, мне нужна теория, это важно, но это только для моей основы, я плохо запоминаю, много практики приучает мой мозг к пониманию чего-то.
Поэтому мне было интересно, что я напишу много учебных примеров в своих сообщениях в блоге и поделился своими знаниями с вами. Я действительно надеюсь, что моя статья здесь поможет кому-то, кто изо всех сил пытался изучить JavaScript, выполняя множество практик.
Начнем погружение!
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ:
Пожалуйста, сначала сделайте это самостоятельно, прежде чем читать дальше о том, как я это сделал, потому что у каждого человека есть свое собственное решение, возможно, ваши коды отличаются от моих. но результат тот же.
Если в результате не возникнет ошибок или ошибок, я буду считать ваши коды правильными. Но разница в том, насколько эффективен ваш код, не утруждайте себя тем, чтобы сделать код эффективным, для этого нужен опыт, даже я могу сделать неэффективный код по мнению других людей. Давайте сначала сосредоточимся на ошибках и ошибках.
В сегодняшней статье я попрошу вас создать приложение Калькулятор чаевых с использованием JavaScript. Вот правила:
- У вас будет 3 поля ввода, первое — для ввода общего счета, второе — раскрывающийся список для выбора «Как прошла услуга», а последнее — «Сколько людей разделяет счет?».
- Поле ввода «Общая сумма счета» является числовым полем и не должно иметь пустого значения. Если вы отправите его с пустым значением, оно уведомит пользователя о «Недопустимом значении».
- Поле How was the service представляет собой раскрывающийся список с 5 вариантами:
1. Отлично, значение 30 %
2. Хорошо, 20 %
3. Удовлетворительно, 15 %. %
4. Плохо, 10%
5. Ужасно, 5% - Как значение службы по умолчанию было удовлетворительным, и оно также не должно иметь значение 0, если каким-то образом имеет значение 0, оно предупредит пользователя с «Недопустимым значением»
- Сколько человек разделяет счет? является числовым полем и не должно иметь пустого значения. Если вы отправляете его с пустым значением, оно будет предупреждать пользователя о «Недопустимом значении».
- в представлении сумма чаевых будет отображаться следующим образом: «Сумма чаевых: $ X.XX каждая», X — это цифра, а позади нее две цифры.
- чтобы рассчитать чаевые, используйте следующую формулу: (Сумма счета * Качество обслуживания) / Общее количество людей, поделившихся
Удачи!
Ответ:
Прежде чем мы начнем создавать калькулятор чаевых, нам нужно настроить нашу среду. Мы будем использовать 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);
Разберем этот код:
- Мы определяем функцию с именем
calculateTip
, которая будет запускаться при нажатии кнопки. - Внутри функции мы используем
document.getElementById
для получения входных значений из HTML-формы и сохранения их в переменных. - Мы проверяем входные значения, чтобы убедиться, что пользователь ввел допустимые значения. Если какое-либо из полей ввода пусто или качество обслуживания установлено на 0, мы выводим предупреждающее сообщение и возвращаемся из функции.
- Если введенные значения верны, мы рассчитываем сумму чаевых по формуле
(billAmount * serviceQuality) / totalPeople
. - Мы используем
toFixed(2)
для округления суммы чаевых до двух знаков после запятой. - Мы обновляем HTML-содержимое элемента
tipAmount
, чтобы отобразить рассчитанную сумму чаевых. - Наконец, мы добавляем прослушиватель событий к кнопке вычисления, который будет запускать функцию
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.
Если вы считаете, что этот пост полезен, пожалуйста, поддержите меня в «Купи мне кофе, это действительно много значит для меня, и я буду публиковать больше таких постов.