main.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. // //Города и страны
  2. fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.json')
  3. .then(res => res.json())
  4. .then(json => {
  5. let countrySelect = document.querySelector('select');
  6. let citySelect = document.createElement('select');
  7. for(let countryChoice in json) {
  8. let countrySelectOption = document.createElement('option');
  9. countrySelectOption.innerText = countryChoice;
  10. countrySelect.append(countrySelectOption);
  11. }
  12. countrySelect.onchange = () => {
  13. let cityChoice = json[countrySelect.value];
  14. citySelect.innerHTML = '';
  15. for (let key in cityChoice) {
  16. let citySelectOption = document.createElement('option');
  17. citySelectOption.innerText = cityChoice[key];
  18. citySelect.append(citySelectOption);
  19. }
  20. }
  21. document.body.append(countrySelect);
  22. document.body.append(citySelect);
  23. })
  24. // Таблица умножения
  25. let table = document.createElement('table');
  26. let caption = document.createElement('caption');
  27. for (let i = 0; i <= 9; i++) {
  28. let row = document.createElement('tr');
  29. for (let j = 0; j <= 9; j++) {
  30. let col = document.createElement('td');
  31. col.onmouseover = function() {
  32. row.style.background = '#00BFFF';
  33. col.style.background = '#FFDAB9';
  34. for(let i = 0; i <= 9; i++) {
  35. table.children[i].children[j].style.background = '#FFDAB9';
  36. }
  37. }
  38. col.onmouseout = function() {
  39. row.style.background = '';
  40. col.style.background = '';
  41. for(let i = 0; i < table.children.length; i++) {
  42. table.children[i].children[j].style.background = '';
  43. }
  44. }
  45. caption.onmouseover = function() {
  46. caption.style.background = '#00BFFF';
  47. caption.style.color = '#FFF';
  48. }
  49. caption.onmouseout = function() {
  50. caption.style.background = '';
  51. caption.style.color = '';
  52. }
  53. let val = i * j;
  54. if (val === 0) {
  55. val = i || j;
  56. }
  57. col.innerHTML = val;
  58. row.appendChild(col);
  59. table.appendChild(row);
  60. }
  61. if (caption) {
  62. table.appendChild(caption);
  63. }
  64. }
  65. document.body.appendChild(table);