Home Explore Help
Sign In
serg1557733
/
HomeWorks
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

calculator fuel consumption

serg155alternate 2 years ago
commit
c5f5cf91c1
3 changed files with 173 additions and 0 deletions
Split View Show Diff Stats
  1. 47 0
      index.html
  2. 60 0
      script.js
  3. 66 0
      style.css

+ 47 - 0
index.html
View File 

@@ -0,0 +1,47 @@
 
+<!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>HW - Calculator</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <div class="calc__wrapper">
 
+            <h3>Калькулятор расхода топлива</h3>
 
+            <div class="calc__item">
 
+                <span>Затрачено топлива</span>
 
+                <input type="number"  name="liters">
 
+                <label for="liters">литров</label>
 
+            </div>
 
+            <div class="calc__item">
 
+                <span class="way">Пройдено пути</span>
 
+                <input type="number"  name="km">
 
+                <label for="km">километров</label>
 
+            </div>
 
+            <div class="radio__wrapper">
 
+                <input type="radio" id="liter" name="choise">
 
+                <label for="liter">В литрах на 100км</label>
 
+                <input type="radio" id="uah" name="choise">
 
+                <label for="uah">В гривнах на 100км</label>
 
+                <div class="price__item">
 
+                    <span class="price">Цена топлива за литр</span>
 
+                    <input type="number" name="price" required>
 
+                    <label for="price">грн</label>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="outer"> </div>
 
+
 
+            <button class="btn"> Очистить </button>
 
+
 
+        </div>
 
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+
 
+</html>

+ 60 - 0
script.js
View File 

@@ -0,0 +1,60 @@
 
+let fuel = document.querySelector('[name = "liters"]'),
 
+    way = document.querySelector('[name = "km"]'),
 
+    checkLiter = document.querySelector('#liter'),
 
+    checkUah = document.querySelector('#uah'),
 
+    priceInput = document.querySelector('.price__item'),
 
+    price = document.querySelector('[name = "price"]'),
 
+    reset = document.querySelector('.btn'),
 
+    outer = document.querySelector('.outer');
 
+
 
+
 
+function calcMyConsumption(fuelLiters, kmWay, pricePerLiter) {
 
+    if (fuelLiters && kmWay && pricePerLiter) {
 
+        pricePerLiter = price.value;
 
+        const result = (fuelLiters / kmWay) * 100 * pricePerLiter;
 
+        outer.textContent = `Ваш затраты на 100км пути ${result.toFixed(2)} грн`;
 
+        reset.style.display = 'block';
 
+
 
+    } else {
 
+        const result = (fuelLiters / kmWay) * 100;
 
+        outer.textContent = `Ваш расход на 100км пути ${result.toFixed(2)} литров`;
 
+        reset.style.display = 'block';
 
+
 
+    }
 
+}
 
+
 
+checkLiter.addEventListener('change', () => {
 
+    if (checkLiter.checked && fuel.value && way.value) {
 
+        priceInput.style.display = 'none';
 
+        calcMyConsumption(fuel.value, way.value);
 
+       
+    } else {
 
+        outer.textContent = `Заполните все формы`;
 
+
 
+    }
 
+})
 
+
 
+
 
+checkUah.addEventListener('change', () => {
 
+    if (checkUah.checked && fuel.value && way.value ) {
 
+        priceInput.style.display = 'block';
 
+        price.value = '';
 
+        outer.textContent = `Внесите цену`;
 
+        price.addEventListener('input', () => calcMyConsumption(fuel.value, way.value, price));
 
+    
+    } else {
 
+        outer.textContent = `Заполните данные формы`;
 
+
 
+    }
 
+})
 
+
 
+reset.addEventListener('click', () => {
 
+    fuel.value = ''; 
+    way.value = '';
 
+    price.value = '';
 
+    outer.textContent = '';
 
+    priceInput.style.display = 'none';
 
+    reset.style.display = 'none';
 
+
 
+
 
+})

+ 66 - 0
style.css
View File 

@@ -0,0 +1,66 @@
 
+*, html {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+.container {
 
+    position: relative;
 
+    max-width: 1140px;
 
+    margin: 0 auto;
 
+    padding: 50px;
 
+}
 
+
 
+.calc__wrapper {
 
+    width: 540px;
 
+    height: 350px;
 
+    padding: 20px;
 
+    margin: 0 auto;
 
+    border: 2px solid grey;
 
+    background-color: ivory;
 
+    box-shadow: 12px 12px 2px 1px rgba(93, 93, 95, 0.2);
 
+    border-radius: 25px;
 
+    text-align: center;
 
+  
+}
 
+h3 {
 
+    margin-bottom: 20px;
 
+}
 
+
 
+input {
 
+    width: 60px;
 
+    margin-left: 10px;
 
+    padding: 2px;
 
+}
 
+
 
+.calc__item {
 
+    display: grid;
 
+    grid-template-columns: 1fr 90px 1fr;
 
+    align-items: baseline;
 
+    padding: 10px;
 
+    text-align: left;
 
+} 
+ .price__item{
 
+    display: none;
 
+    margin-top: 20px;
 
+}
 
+
 
+
 
+.outer {
 
+    margin-top: 20px;
 
+    margin-bottom: 10px;
 
+    font-size: 24px;
 
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 
+    color: rgb(19, 16, 207);
 
+}
 
+
 
+.btn {
 
+    display: none;
 
+    margin: 0 auto;
 
+    padding: 5px;
 
+    border-radius: 10px;
 
+    background-color:linen;
 
+    color: rgb(92, 44, 44);
 
+    box-shadow: 3px 3px 2px 1px rgba(95, 93, 94, 0.2);
 
+    align-self: end;
 
+}
 
+
 
+