Сегодня вы создадите сайт калькулятора древесины с помощью ванильного JavaScript (не ванильного мороженого!)
Обзор проекта
На этом веб-сайте пользователи могут сказать, сколько кроватей, столов и стульев им нужно, и сколько кубических футов древесины необходимо для кровати, стола и стульев. И ваш сайт покажет пользователю, сколько кубометров нужно для изготовления Кровать, Стол, Стул. Итак, давайте начнем.
Настройка HTML и CSS
Создайте новую папку с именем деревянный калькулятор, откройте папку в текстовом редакторе. Я открыл папку Visual Studio Code (VS Code).
В VS Code я установил расширение под названием Live Server.
Теперь нам нужно создать index.html, style.css, script.js.
В файле index.html я установил стандартный HTML. В VS Code, если я напишу ! они показывают аббревиатуру emmet, теперь нажмите Enter, шаблон HTML готов для вас. Если вы не используете VS Code, не волнуйтесь, пишите шаблонный HTML вручную. Установите заголовок на Калькулятор древесины. И свяжите файл CSS и JavaScript.
Я использую Bootstrap для упрощения дизайна. Итак, свяжите Bootstrap CDN.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wood Calculator</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> <script src="script.js"></script> </body> </html>
Если вы используете VS Code, откройте файл HTML с помощью Live Server. сделать div с классом контейнера и под div сделать шесть входных тегов с классом form-control и установить тип number.
<div class="container>
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
</div>
Установите 1-й заполнитель ввода Сколько кроватей вам нужно. Второй заполнитель ввода Сколько таблиц вам нужно. 3-й заполнитель ввода Сколько стульев вам нужно. 4-й - сколько дров нужно для кровати. 5-й - сколько дерева нужно для стола. 6-й - сколько дерева нужно для стула. И добавьте идентификатор. Именно в примере.
<input type="number" id="bed-quantity" placeholder="How Many Bed You Need" class="form-control"> <input type="number" id="table-quantity" placeholder="How Many Table You Need" class="form-control"> <input type="number" id="chair-quantity" placeholder="How Many Chair You Need" class="form-control"> <input type="number" id="bed-wood" placeholder="How Much Wood Is Needed For A Bed" class="form-control"> <input type="number" id="table-wood" placeholder="How Much Wood Is Needed For A Table" class="form-control"> <input type="number" id="chair-wood" placeholder="How Much Wood Is Needed For A Chair" class="form-control">
Сделайте кнопку после ввода.
Сделайте div с классом результата после кнопки. под div создайте тег h3, который говорит: Всего необходимо дерево: тег span с идентификатором result.
<div class="result">
<h3>The Total Wood Needed Is:<span id="result"></span></h3>
</div>
Теперь добавьте стиль в файл style.css.
.form-control{
margin-top: 25px !important;
width: 500px !important;
text-align: center;
margin: auto;
}
.result{
margin-top: 30px;
text-align: center;
}
.btn{
margin-top: 50px !important;
margin-left: 500px;
}
Добавьте JavaScript
Создайте функцию с именем calculateWood, которая принимает кровать, стол, стул, bedQuantity, tableQuantity, chairQuantity.
function calculateWood(bed, table, chair, bedQuantity, tableQuantity, chairQuantity) {
}
Под функцией напишите переменную totalBedWood = bed * bedQuantity . Аналогично напишите переменнуюtotalTableWood = table * tableQuantity. И переменная totalChairWood = Chair * ChairQuantity.
const totalBedWood = bed * bedQuantity; const totalTableWood = table * tableQuantity; const totalChairWood = chair * chairQuantity;
Создайте переменную totalWood= totalBedWood + totalTableWood + totalChairWood.
const totalWood = totalBedWood + totalTableWood + totalChairWood;
Затем установите переменную totalWood в качестве внутреннего текста resultspan.
document.getElementById('result').innerText = totalWood;
Теперь за пределами захвата функции нажмите кнопку отправки и добавьте к ней прослушиватель событий.
document.getElementById('submit').addEventListener('click' , ()=>{
})
Под функцией прослушивателя событий напишите несколько переменных. Следуй примеру.
const bed = parseInt(document.getElementById('bed-wood').value);
const table = parseInt(document.getElementById('table-wood').value);
const chair = parseInt(document.getElementById('chair-wood').value);
const bedQuantity = parseInt(document.getElementById('bed-quantity').value);
const tableQuantity = parseInt(document.getElementById('table-quantity').value);
const chairQuantity = parseInt(document.getElementById('chair-quantity').value);
Теперь вызовите функцию и задайте параметры.
calculateWood(bed, table, chair, bedQuantity, tableQuantity, chairQuantity);
