script.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. //DOM
  2. /* Таблица умножения
  3. Сделать таблицу умножения, используя DOM createElement
  4. и innerText. Создайте таблицу, вложенные строки и ячейки в циклах. */
  5. let root = document.querySelector('.root');
  6. for (let i = 0; i < 10; i++) {
  7. let tr = document.createElement('tr');
  8. root.append(tr);
  9. for (let k = 0; k < 10; k++) {
  10. let td = document.createElement('td');
  11. if (i === 0) {
  12. td.innerText = k;
  13. tr.append(td);
  14. } else if (k === 0) {
  15. td.innerText = i;
  16. tr.append(td);
  17. } else {
  18. td.innerText = i * k;
  19. tr.append(td);
  20. }
  21. }
  22. }
  23. /* Подсветить ячейку над которой находится курсор мыши.
  24. Используйте события mouseover и mouseout,
  25. и style.backgroundColor для подсветки.
  26. */
  27. let td = document.querySelectorAll('td');
  28. /* td.forEach((i) => {
  29. i.onmouseover = () => i.style.backgroundColor = 'yellow';
  30. i.onmouseout = () => i.style.backgroundColor = '';
  31. }) */
  32. /*
  33. Подсветить строку и столбец,
  34. в которой находится подсвеченная ячейка. Используйте parentElement (родительский элемент элемента DOM), и список его детей: children.
  35. Читкоды:
  36. в обработчик события в качестве this передается элемент, на котором событие произошло;
  37. у td есть свойство cellIndex, в котором лежит номер ячейки;
  38. у tr, аналогично есть свойство rowIndex - номер строки; */
  39. td.forEach((item, i) => {
  40. item.onmouseover = (e) => {
  41. item.style.backgroundColor = 'yellow';
  42. item.parentNode.style.backgroundColor = 'green';
  43. let trCollect = Array.from(item.parentElement.parentElement.children);
  44. trCollect.forEach((el, i) => {
  45. // console.log(el.children[i].cellIndex);
  46. //console.log(item.cellIndex);
  47. if (el.children[i].cellIndex === item.cellIndex) {
  48. Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = 'red');
  49. }
  50. });
  51. };
  52. item.onmouseout = () => {
  53. item.style.backgroundColor = '';
  54. item.parentNode.style.backgroundColor = '';
  55. let trCollect = Array.from(item.parentElement.parentElement.children);
  56. trCollect.forEach((el, i) => {
  57. if (el.children[i].cellIndex === item.cellIndex) {
  58. Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = '');
  59. }
  60. });
  61. }
  62. })
  63. //Calc + Calc Live
  64. let fuel = document.querySelector('[name = "liters"]'),
  65. way = document.querySelector('[name = "km"]'),
  66. checkLiter = document.querySelector('#liter'),
  67. checkUah = document.querySelector('#uah'),
  68. priceInput = document.querySelector('.price__item'),
  69. price = document.querySelector('[name = "price"]'),
  70. reset = document.querySelector('.btn'),
  71. outer = document.querySelector('.outer');
  72. function calcMyConsumption(fuelLiters, kmWay, pricePerLiter) {
  73. if (fuelLiters && kmWay && pricePerLiter) {
  74. pricePerLiter = price.value;
  75. const result = (fuelLiters / kmWay) * 100 * pricePerLiter;
  76. outer.textContent = `Ваш затраты на 100км пути ${result.toFixed(2)} грн`;
  77. reset.style.display = 'block';
  78. } else {
  79. const result = (fuelLiters / kmWay) * 100;
  80. outer.textContent = `Ваш расход на 100км пути ${result.toFixed(2)} литров`;
  81. reset.style.display = 'block';
  82. }
  83. }
  84. checkLiter.addEventListener('change', () => {
  85. if (checkLiter.checked && fuel.value && way.value) {
  86. priceInput.style.display = 'none';
  87. calcMyConsumption(fuel.value, way.value);
  88. } else {
  89. outer.textContent = `Заполните все формы`;
  90. }
  91. })
  92. // add event onchange
  93. checkUah.addEventListener('change', () => {
  94. if (checkUah.checked && fuel.value && way.value) {
  95. priceInput.style.display = 'block';
  96. price.value = '';
  97. outer.textContent = `Внесите цену`;
  98. price.addEventListener('input', () => calcMyConsumption(fuel.value, way.value, price));
  99. } else {
  100. outer.textContent = `Заполните данные формы`;
  101. }
  102. })
  103. reset.addEventListener('click', () => {
  104. fuel.value = '';
  105. way.value = '';
  106. price.value = '';
  107. outer.textContent = '';
  108. priceInput.style.display = 'none';
  109. reset.style.display = 'none';
  110. })