HW25

[MarynaBasieva]

Task3

Основна проблема полягала в тому, що код припускав наявність елементів

в документі до виконання скрипту, але спосіб їх створення не був наданий або обговорений. Ось ключові моменти, які потребували уточнення або корекції:

Попереднє створення елементів

: Ваш код передбачав, що елементи

вже існують у документі на момент виконання JavaScript. Якщо це не так, то document.querySelectorAll('li') поверне пустий NodeList, і код не зможе додати посилання до неіснуючих елементів.

Вставка HTML через insertAdjacentHTML для елементів

: Це дійсно працює, але ваш підхід вимагає, щоб елементи

були спочатку створені в HTML або додані до DOM до цього кроку. Також ваш код не створював самі елементи

, а лише вставляв HTML для посилань у вже існуючі

.

Створення списку: Ваше запитання також містило інструкцію про створення впорядкованого списку (

або
) на основі listWithHref, але ваш код не включав створення цього самого списку чи додавання елементів
• до нього.

  Щоб уникнути цих проблем, рекомендовано спочатку створити впорядкований (або невпорядкований) список в JavaScript, потім динамічно створити елементи

• та , заповнити їх відповідними даними з listWithHref, і нарешті додати ці елементи до списку, який потім буде додано до DOM. Такий підхід забезпечує більшу гнучкість і контроль над структурою DOM, яку ви створюєте за допомогою JavaScript.

Task4 Ваш код для створення таблиці на основі масиву students і додавання її на сторінку є майже правильним, але він не встановлює CSS-властивості для заголовків стовпців, як ви зазначили у завданні. Щоб встановити вказані CSS-властивості для заголовків стовпців (background-color: blue; color: azure;), вам потрібно додати стилі до кожного з заголовків th перед їх додаванням до рядка заголовка. Ось як це можна зробити:

function studentsTable() { 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}, ];

let tblBody = document.createElement("tbody");
let thead = document.createElement("thead");
let thFirstName = document.createElement("th");
let thLastName = document.createElement("th");
let thDegree = document.createElement("th");
let row = document.createElement("tr");
let tbl = document.createElement("table");

thFirstName.textContent = "First Name";
thLastName.textContent = "Last Name";
thDegree.textContent = "Degree";

// Встановлення стилів для заголовків
const headerStyle = 'background-color: blue; color: azure;';
thFirstName.style = headerStyle;
thLastName.style = headerStyle;
thDegree.style = headerStyle;

row.appendChild(thFirstName);
row.appendChild(thLastName);
row.appendChild(thDegree);
thead.appendChild(row);
tbl.appendChild(thead);

for (let i = 0; i < students.length; i++){
    let student = students[i];
    let row = document.createElement("tr");     

    let cellFirstName = document.createElement("td");
    let cellLastName = document.createElement("td");
    let cellDegree = document.createElement("td");

    cellFirstName.textContent = student.firstName;
    cellLastName.textContent = student.lastName;
    cellDegree.textContent = student.degree;

    row.appendChild(cellFirstName);
    row.appendChild(cellLastName);
    row.appendChild(cellDegree);

    tblBody.appendChild(row);
}

tbl.appendChild(tblBody);

tbl.style.borderCollapse = "collapse";
tbl.style.width = "100%";

tbl.querySelectorAll("th, td").forEach(cell => {
    cell.style.border = "1px solid #ddd";
    cell.style.padding = "8px";
});

document.body.appendChild(tbl);

}

studentsTable();