homework/js05/script2.js

// For Select Option
// Используя заготовку выше, создайте выпадающий список с валютами. Элементы выпадающего списка создаются
// с помощью тэга <option>
for_select_option: {
  const currencies = ["USD", "EUR", "GBP", "UAH"];
  let str = "<select>";
  for (let currency of currencies) {
    str += `<option value='${currency}'>${currency}</option>`;
  }
  str += "</select>";
  document.write(str); //document.write отобразит ваш HTML на странице
}

// For Table Horizontal
// Аналогично, добейтесь вывода имен в ячейки таблицы по горизонтали (одна строка с четырьмя ячейками)
for_table_horizontal: {
  const names = ["John", "Paul", "George", "Ringo"];
  let str = "<table><tr>";
  for (let name of names) {
    str += `<td>${name}</td>`;
  }
  str += "</tr></table>";
  document.write(str); //document.write отобразит ваш HTML на странице
}

// For Table Vertical
// Аналогично, добейтесь вывода имен в ячейки таблицы по вертикали(одна колонка с четырьмя строками,
// в каждой строке - одна ячейка)
for_table_vertical: {
  const names = ["John", "Paul", "George", "Ringo"];
  let str = "<table>";
  for (let name of names) {
    str += `<tr><td>${name}</td></tr>`;
  }
  str += "</table>";
  document.write(str); //document.write отобразит ваш HTML на странице
}

// For Table Letters
// Используя заготовку выше, создайте таблицу 3x4. В каждой строке по три ячейки с буквами, четыре строки,
// так как 4 валюты в массиве.
for_table_letters: {
  const currencies = ["USD", "EUR", "GBP", "UAH"];
  let str = "<table style = 'border-collapse: collapse; border: 1px solid; width: 100px; height: 120px; text-align: center'>";
  for (let currency of currencies) { //цикл создает строки
    //одна итерация цикла создает ОДНУ СТРОКУ
    str += "<tr>";
    console.log(currency);
    for (let letter of currency) { //цикл создает ЯЧЕЙКИ в ОДНОЙ СТРОКЕ
      //одна итерация цикла создает ОДНУ ЯЧЕЙКУ
      str += `<td style = 'border-collapse: collapse; border: 1px solid'>${letter}</td>`;
      console.log(letter);
    }
    str += "</tr>";
  }
  str += "</table>";
  document.write(str); //document.write отобразит ваш HTML на странице
}

// For Multiply Table
// Выведите таблицу умножения 5x5 из задания Multiply table в таблицу, используя вложенные for .... of и
// document.write. Сделайте черезстрочную подсветку - задавайте четным строкам один цвет фона, нечетным - другой
for_multiply_table: {
  const arr = [
    [0, 0, 0, 0, 0],
    [0, 1, 2, 3, 4],
    [0, 2, 4, 6, 8],
    [0, 3, 6, 9, 12],
    [0, 4, 8, 12, 16]];
  let str = "<table style = 'border-collapse: collapse; border: 1px solid; text-align: center; margin-top: 20px;'>";
  for (let index of arr.keys()) {
    if (index % 2 == 0) {
      str += "<tr style='background-color: #babfc4;'>";
    } else {
      str += "<tr style='background-color: #fcb450;'>";
    }
    for (let number of arr[index]) {
      str += `<td style = 'border-collapse: collapse; border: 1px solid; width: 30px; height: 30px;'>${number}</td>`;
    }
    str += "</tr>";
  }
  str += "</table>";
  document.write(str);
}

// Reduce HTML
// Реализуйте задачу For Select Option используя reduce:
reduce_html: {
  const currencies = ["USD", "EUR", "GBP", "UAH"];
  let str = "<select>";
  str += currencies.reduce((a, b) => `${a}<option value='${b}'>${b}</option>`, "");
  str += "</select>";
  document.write(str);
}