У меня есть миссия практиковать JavaScript как можно больше, выполняя различные проекты. Я выбрал этот проект, потому что он относительно прост и понятен. Я уже знаком с вычислениями в JavaScript. Чтобы создать проект калькулятора подсказок JavaScript, мне просто нужно было научиться добавлять эти вычисления к существующему элементу html.
Живой пример кода: https://dmarcisovska.github.io/javascript-tip-calculator/
Код Github: https://github.com/dmarcisovska/javascript-tip-calculator
Процесс мозгового штурма
Прежде чем приступить к делу, я сел и подумал о шагах, необходимых для реализации калькулятора чаевых на JavaScript.
Шаги
- Пользователь вводит сумму счета в долларах
- Пользователь выбирает процентную сумму из раскрывающегося списка
- Функция калькулятора чаевых JavaScript умножает сумму счета на процент чаевых для расчета суммы чаевых
- Калькулятор чаевых JavaScript добавляет сумму вашего счета к сумме чаевых, рассчитанной на предыдущем шаге.
- Калькулятор чаевых JavaScript возвращает сумму вашего счета, сумму чаевых и общий счет конечному пользователю и добавляет его в html.
Я определил, что пользователю нужно будет ввести сумму счета в долларах. Затем я бы попросил их выбрать процент из раскрывающегося списка, чтобы мне было проще. Я бы также создал функцию калькулятора чаевых в JavaScript, которая будет получать сумму счета, процент чаевых, умножать их, чтобы получить сумму чаевых, и добавлять сумму чаевых к счету, чтобы получить общую сумму.
HTML
Первый шаг — это HTML. Я использую стартовый шаблон Bootstrap. Я создал форму для сбора информации о счете и сумме чаевых. Я убедился, что типом ввода является число, чтобы пользователь не мог добавлять нечисловые символы в поле, и это избавило бы меня от необходимости проверять данные. Чтобы еще больше избежать проверки данных, я установил минимальное входное значение на 0. Я также установил начальное значение на 100,00.
Я создал раздел, в котором отображается сумма счета, сумма причитающихся чаевых и общий счет, который должен быть выплачен. Этот раздел скрыт через CSS и позже будет отображаться через JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Tip Calculator</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="overlay">
<h1>Tip Calculator</h1>
<hr class="white">
<p>Use the form below to calculate your tip.
</p>
<div class="card mb-4" id="bill-card">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<div>
Bill
</div>
<div id="bill">
<p id="bill-p"> </p>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
Tip
</div>
<div id="tip">
<p id="tip-p"> </p>
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<div>
Total
</div>
<div id="total">
<p id="total-p"> </p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<div class="form-row">
<label class="mb-sm-2 mt-3" for="billInput">Bill Amount</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="billInput" placeholder="" min="00.00" value="100.00" step="0.010">
</div>
</div>
<div class="form-row">
<label class="mb-sm-2 mt-3" for="tipForm">Tip Amount</label>
<select class="form-control" id="tipForm">
<option value=".05">5% </option>
<option value=".1">10% </option>
<option selected value=".15">15% </option>
<option value=".2">20% </option>
<option value=".25">25% </option>
</select>
</div>
</div>
</div>
<button type="button" class="btn btn-outline-light btn-lg btn-block" onclick="calcTip()">Calculate Tip Total</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS
Теперь давайте стилизуем калькулятор чаевых JavaScript. Я нашел классное фоновое изображение кафе, чтобы добавить его в калькулятор чаевых на javascript. Я также подумал, что было бы здорово добавить размытый прозрачный фон в области, где отображается вся информация. Затем я стилизовал шрифт и разделитель hr в CSS.
html, body, .container-fluid {
width: 100%;
height: 100%;
}
.white{
width: 50px;
height: .5em;
border: 0; border-top: 1px solid #ffffff;
}
.container-fluid,
.overlay:before {
background: url(https://cdn.pixabay.com/photo/2018/07/14/15/27/cafe-3537801_1280.jpg) no-repeat fixed 0 0 / cover;
}
.card {
color: gray;
}
.container-fluid {
align-items: center;
display: flex;
justify-content: center;
}
.overlay {
margin: 0 auto;
max-width: 768px;
overflow: hidden;
padding: 50px;
position: relative;
color: white;
font-family: 'Lato', sans-serif;
text-align: center;
z-index: 0;
}
.overlay:before {
content: '';
filter: blur(20px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#bill-card {
display: none;
}
JavaScript
Я создал функцию калькулятора чаевых в JavaScript, которая называется calcTip. В функции я беру значение суммы чаевых. Я также беру входное значение суммы счета и устанавливаю их как переменные, чтобы их можно было легко использовать позже. Затем я нахожу элемент платежной карты и устанавливаю его как переменную, которая позже будет использоваться для отображения скрытого в данный момент элемента платежной карты.
Следующим шагом является преобразование значения суммы чаевых и значения суммы счета в числа из строк, чтобы я мог вычислить математику для обоих из них (все пойдет не так, как ожидалось, если вы добавите строки вместе).
Затем я беру html-элементы, которые в настоящее время пусты, и в них будут содержаться расчетный счет, чаевые и общая сумма.
Далее расчеты. Я вычисляю общую сумму счета, умножая сумму чаевых на сумму счета. Я рассчитываю общий счет, добавляя общую сумму чаевых к счету.
Затем я добавляю чаевые, счет и общую стоимость к пустым элементам, упомянутым в абзаце выше последнего. Я использовал .toFixed(2) для значений, чтобы они отображались в долларах.
Наконец, я сделал видимым элемент карты счета, чтобы теперь вы могли видеть карту, на которой показана сумма задолженности.
function calcTip(){
// grab the input values
let tipAmount= document.getElementById("tipForm").value;
let billAmount = document.getElementById("billInput").value;
let billCard = document.getElementById("bill-card");
//turn strings into numbers
let tipAmountNumber = parseFloat(tipAmount);
let billAmountNumber = parseFloat(billAmount);
//grab elements
let bill = document.getElementById('bill-p');
let tip = document.getElementById('tip-p');
let total = document.getElementById('total-p');
// calculations
let totalAmount = (tipAmountNumber * billAmountNumber);
let totalBill = totalAmount + billAmountNumber;
//append content
tip.innerHTML = "$" + (totalAmount).toFixed(2);
bill.innerHTML = "$" + billAmountNumber.toFixed(2);
total.innerHTML = "$" + totalBill.toFixed(2);
// show the bill info
billCard.style.display = "block";
}
Первоначально опубликовано на https://denisa.dev 23 апреля 2020 г.
