Browse Source

fix derictories1

serg155alternate 2 years ago
parent
commit
84ed1fef22
3 changed files with 0 additions and 173 deletions
  1. 0 47
      index.html
  2. 0 60
      script.js
  3. 0 66
      style.css

+ 0 - 47
index.html

@@ -1,47 +0,0 @@
-<!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>

+ 0 - 60
script.js

@@ -1,60 +0,0 @@
-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';
-
-
-})

+ 0 - 66
style.css

@@ -1,66 +0,0 @@
-*, 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;
-}
-
-