homework/js07/script-for-index.js

// For Table
// Оформите задание For Multiply Table как функцию, которая принимает любой массив с массивами, а возвращает
// строку HTML с тэгом <table> и всякими tr и td.
for_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]];

  const forTable = (arr) => {
    let str = "<table style = 'border-collapse: collapse; border: 1px solid; text-align: center; margin: 20px 0 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>";
    return str;
  }
  document.write(forTable(arr));
}

// Form
// Оформите задание Form как функцию, которая принимает любой объект как параметр и создает форму на экране.
form: {
  const car = {
    "Name": "chevrolet chevelle malibu",
    "Cylinders": 8,
    "Displacement": 307,
    "Horsepower": 130,
    "Weight_in_lbs": 3504,
    "Origin": "USA",
    "in_production": false
  }
  const form = (obj) => {
    let string = "<form style='display: flex; flex-direction: column;'>";
    for (let value of Object.keys(car)) {
      let type;
      if (typeof (car[value]) == 'number') {
        type = 'number';
      } else if (typeof (car[value]) == 'string') {
        type = 'text';
      } else if (typeof (car[value]) == 'boolean') {
        type = 'checkbox';
      }
      string += `<label style='margin-bottom: 16px;'>
  ${value.slice(0, 1).toUpperCase() + value.slice(1).toLowerCase().replaceAll("_", " ")}
  <input type ="${type}" value="${car[value]}"/>
  </label>`;
    }
    string += "</form>";
    document.write(string);
  }
  form(car);
}

// Table
// Оформите задание Table как функцию, которая принимает следующие параметры:
// любой массив объектов для отображения
// поле, по которому сортировать
// порядок сортировки (убывание/возрастание)
// Перед отображением:
// скопируйте исходный массив, что бы сортировка не изменила оригинал;
// отсортируйте с помощью функции из предыдущего задания
// Отображение возьмите из задания Table
table: {
  const persons = [
    {
      name: 'Мария',
      fatherName: 'Ивановна',
      surname: 'Иванова',
      sex: 'female'
    },
    {
      name: 'Николай',
      fatherName: 'Иванович',
      surname: 'Иванов',
      age: 15
    },
    {
      name: 'Петр',
      fatherName: 'Иванович',
      surname: 'Иванов',
      married: true
    },
  ]
  const byField = (arr, fieldName, isAscending) => {
    let objSort = (a, b) => {
      if (a[fieldName] > b[fieldName]) {
        return isAscending || isAscending == undefined ? 1 : -1;
      } else if (a[fieldName] < b[fieldName]) {
        return isAscending || isAscending == undefined ? -1 : 1;
      } else {
        return 0;
      }
    }
    let sortedArr = arr.slice().sort(objSort);
    return sortedArr;
  }
  const table = (arr, fieldName, isAscending) => {
    let sortedArr = byField(arr, fieldName, isAscending);
    let ColumnArr = [];
    for (let item of sortedArr) {
      for (let key of Object.keys(item)) {
        if (!ColumnArr.includes(key)) {
          ColumnArr.push(key);
        }
      }
    }
    let str = "<table style = 'border-collapse: collapse; border: 1px solid gray; text-align: center; margin-bottom: 20px'><tr>";
    for (ColumnName of ColumnArr) {
      str += `<th style = 'border-collapse: collapse; border: 1px solid gray; background-color: #d3d3d3; padding: 10px'>${ColumnName}</th>`;
    }
    str += "</tr>";
    for (let item of sortedArr) {
      str += "<tr>";
      for (let ColumnName of ColumnArr) {

        str += `<td style = 'border-collapse: collapse; border: 1px solid gray; padding: 10px'>${item[ColumnName] || ''}</td>`;
      }
      str += "</tr>";
    }
    str += "</table>"
    document.write(str);
  }
  table(persons, "name", false);
}