|
|
@@ -0,0 +1,90 @@
|
|
|
+<!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>Document</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="divide" style="margin-bottom: 50px;">
|
|
|
+ <h2>Задание: Divide</h2>
|
|
|
+ <input type='number' id="firstNumber" />
|
|
|
+ <input type='number' id="secondNumber" />
|
|
|
+ <div id="divisionResult">
|
|
|
+ Калькулятор деления нацело двух чисел. Введите два числа в полях выше:
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ const calcResult = () => {
|
|
|
+ const result = Math.floor(firstNumber.value / secondNumber.value)
|
|
|
+ const rest = firstNumber.value % secondNumber.value
|
|
|
+
|
|
|
+ divisionResult.innerHTML = `Результат деления нацело: ${result} (и в остаче: ${rest})`
|
|
|
+ console.log(firstNumber.value, secondNumber.value, divisionResult.innerHTML)
|
|
|
+ }
|
|
|
+
|
|
|
+ firstNumber.oninput = secondNumber.oninput = calcResult
|
|
|
+ </script>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="CalcLive">
|
|
|
+ <h2>Задание: Calc CalcLive</h2>
|
|
|
+ <p>Рассчитываем стоимости электричества и среднее потребление в день</p>
|
|
|
+
|
|
|
+ <input type="number" id="firstPeriodEnd" placeholder="Конечные показатели" style="min-width: 200px;" />
|
|
|
+ <input type="number" id="firstPeriodStart" placeholder="Начальные показатели" style="min-width: 200px;" />
|
|
|
+ <input type="number" id="firstPrice" placeholder="Стоимость коп/кВт" style="min-width: 100px;" />
|
|
|
+ <select id="firstPeriod">
|
|
|
+ <option>День</option>
|
|
|
+ <option>Ночь</option>
|
|
|
+ </select>
|
|
|
+ <div id="firstResult">
|
|
|
+ Здесь будет указана стоимость электроэнергии в выбранный период
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <br /><br />
|
|
|
+ <input type="number" id="secondPeriodEnd" placeholder="Конечные показатели" style="min-width: 200px;" />
|
|
|
+ <input type="number" id="secondPeriodStart" placeholder="Начальные показатели" style="min-width: 200px;" />
|
|
|
+ <input type="number" id="secondPrice" placeholder="Стоимость коп/кВт" style="min-width: 100px;" />
|
|
|
+ <select id="secondPeriod">
|
|
|
+ <option>День</option>
|
|
|
+ <option>Ночь</option>
|
|
|
+ </select>
|
|
|
+ <div id="secondResult">
|
|
|
+ Здесь будет указана стоимость электроэнергии в выбранный период
|
|
|
+ </div>
|
|
|
+ <br /><br />
|
|
|
+
|
|
|
+ <input type="number" id="numberOfDays" placeholder="Дней в месяце" style="min-width: 200px;" />
|
|
|
+ <br /><br />
|
|
|
+
|
|
|
+ <div id="sumresult">
|
|
|
+ Здесь буде указана суммарная стоимость потребленного электричества и среднее потребление э/э в сутки.
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const ResultCalc = () => {
|
|
|
+
|
|
|
+ const result = (firstPeriodEnd.value - firstPeriodStart.value) * firstPrice.value * (firstPeriod.value === 'День' ? 1 : 0.5) / 100
|
|
|
+
|
|
|
+ firstResult.innerHTML = `Стоимость потребленной э/э в ${firstPeriod.value === 'День' ? 'дневное' : 'ночное'} время: ${result.toFixed(2)} гривен.`
|
|
|
+
|
|
|
+ const result2 = (secondPeriodEnd.value - secondPeriodStart.value) * secondPrice.value * (secondPeriod.value === 'День' ? 1 : 0.5) / 100
|
|
|
+
|
|
|
+ secondResult.innerHTML = `Стоимость потребленной э/э в ${secondPeriod.value === 'День' ? 'дневное' : 'ночное'} время: ${result2.toFixed(2)} гривен.`
|
|
|
+
|
|
|
+ const summResult = result + result2
|
|
|
+
|
|
|
+ const average = ((firstPeriodEnd.value - firstPeriodStart.value) + (secondPeriodEnd.value - secondPeriodStart.value)) / (numberOfDays.value)
|
|
|
+
|
|
|
+ sumresult.innerHTML = `Суммарная стоимость потребленний э/э в месяц: ${summResult} грн. Cреднее потребление э/э в сутки: ${average.toFixed(2)} кВт.`
|
|
|
+ }
|
|
|
+
|
|
|
+ numberOfDays.oninput = firstPeriodEnd.oninput = firstPeriodStart.oninput = firstPrice.oninput = firstPeriod.oninput = secondPeriodEnd.oninput = secondPeriodStart.oninput = secondPrice.oninput = secondPeriod.oninput = ResultCalc
|
|
|
+ </script>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
