script.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. let fuel = document.querySelector('[name = "liters"]'),
  2. way = document.querySelector('[name = "km"]'),
  3. checkLiter = document.querySelector('#liter'),
  4. checkUah = document.querySelector('#uah'),
  5. priceInput = document.querySelector('.price__item'),
  6. price = document.querySelector('[name = "price"]'),
  7. reset = document.querySelector('.btn'),
  8. outer = document.querySelector('.outer');
  9. function calcMyConsumption(fuelLiters, kmWay, pricePerLiter) {
  10. if (fuelLiters && kmWay && pricePerLiter) {
  11. pricePerLiter = price.value;
  12. const result = (fuelLiters / kmWay) * 100 * pricePerLiter;
  13. outer.textContent = `Ваш затраты на 100км пути ${result.toFixed(2)} грн`;
  14. reset.style.display = 'block';
  15. } else {
  16. const result = (fuelLiters / kmWay) * 100;
  17. outer.textContent = `Ваш расход на 100км пути ${result.toFixed(2)} литров`;
  18. reset.style.display = 'block';
  19. }
  20. }
  21. checkLiter.addEventListener('change', () => {
  22. if (checkLiter.checked && fuel.value && way.value) {
  23. priceInput.style.display = 'none';
  24. calcMyConsumption(fuel.value, way.value);
  25. } else {
  26. outer.textContent = `Заполните все формы`;
  27. }
  28. })
  29. checkUah.addEventListener('change', () => {
  30. if (checkUah.checked && fuel.value && way.value ) {
  31. priceInput.style.display = 'block';
  32. price.value = '';
  33. outer.textContent = `Внесите цену`;
  34. price.addEventListener('input', () => calcMyConsumption(fuel.value, way.value, price));
  35. } else {
  36. outer.textContent = `Заполните данные формы`;
  37. }
  38. })
  39. reset.addEventListener('click', () => {
  40. fuel.value = '';
  41. way.value = '';
  42. price.value = '';
  43. outer.textContent = '';
  44. priceInput.style.display = 'none';
  45. reset.style.display = 'none';
  46. })