создание єлементов DOM

const list = ["Item 1", "Item 2", "Item 3", "Item 4"]; // Ваш массив
//Використовуючи метод createElement, створити невпорядкований список на основі масиву list та вставте його на сторінку.
    // Ваш JavaScript код здесь

// Создаем неупорядоченный список
const ul = document.createElement("ul");

// Для каждого элемента массива создаем элемент списка и добавляем его в список
list.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    ul.appendChild(li);
});

// Вставляем список в тело документа (body)
document.body.appendChild(ul);
//--------------------------------------------------------------
//2 Використовуючи метод createElement, створити впорядкований список на основі масиву listWithHref,
 //де кожний елемент списку є тегом a з відповідним посиланням. Наприклад, для першого елемента списку:
 // <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">html</a>
 
 
const listWithHref = [
    {'html': "https://developer.mozilla.org/en-US/docs/Web/HTML"}, 
    {'css': "https://developer.mozilla.org/en-US/docs/Web/CSS"}, 
    {'javascript': "https://developer.mozilla.org/en-US/docs/Web/JavaScript"}, 
    {'react.js': "https://react.dev"}
];

// Создаем упорядоченный список
const ol = document.createElement("ol");
// Для каждого элемента массива создаем элемент списка с ссылкой и добавляем его в список
listWithHref.forEach(item => {
    const key = Object.keys(item)[0]; // Получаем ключ (название) элемента
    const value = item[key]; // Получаем значение (ссылку) элемента
    
    // Создаем элемент списка
    const li = document.createElement("li");
      // Создаем ссылку
    const a = document.createElement("a");
    a.href = value;
    a.textContent = key;
     // Добавляем ссылку в элемент списка
    li.appendChild(a);
     // Добавляем элемент списка в упорядоченный список
    ol.appendChild(li);
});
// Вставляем упорядоченный список в тело документа (body)
document.body.appendChild(ol);
console.log(ol);
// -------------------------------------------------------------------------------------------
// 3 Используя метод createElement, создайте таблицу на основе массива students. Заголовки столбцов
 //таблицы – firstName, lastName, degree. Установить для заголовков столбцов таблицы 
 //CSS-свойства: background-color: blue; color: azure; Разместите таблицу на странице.     
 const students = [
    {'firstName': 'Tom', 'lastName': 'Cat', 'degree': 230},
    {'firstName': 'Nary', 'lastName': 'Ann', 'degree': 336},
    {'firstName': 'John', 'lastName': 'Doe', 'degree': 400},
    {'firstName': 'James', 'lastName': 'Bond', 'degree': 700},
];

// Создаем таблицу
const table = document.createElement("table");

// Создаем заголовок таблицы
const thead = document.createElement("thead");
const trHead = document.createElement("tr");

// Заголовки столбцов
const columns = ['firstName', 'lastName', 'degree'];

// Создаем заголовки столбцов и применяем CSS-свойства
columns.forEach(columnName => {
    const th = document.createElement("th");
    th.textContent = columnName;
    th.style.backgroundColor = "blue";
    th.style.color = "azure";
    trHead.appendChild(th);
});

// Добавляем заголовок в таблицу
thead.appendChild(trHead);
table.appendChild(thead);

// Создаем тело таблицы
const tbody = document.createElement("tbody");

// Заполняем таблицу данными
students.forEach(student => {
    const tr = document.createElement("tr");
   
   columns.forEach(columnName => {
        const td = document.createElement("td");
        td.textContent = student[columnName];
        tr.appendChild(td);
    });
    tbody.appendChild(tr);
});

// Добавляем тело в таблицу
table.appendChild(tbody);

// Вставляем таблицу в тело документа (body)
document.body.appendChild(table);
console.log(table);