Harjutus 2:Loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Sammud:

1: Loome proekti CodeSandboxis

2: Loome index.mjs

const cars = [
  {
    mark: "Toyota",
    mudel: "Corolla",
    aasta: 2021,
    varv: "Punane",
    edasikandumine: "Automaat",
  },
  {
    mark: "BMW",
    mudel: "320i",
    aasta: 2019,
    varv: "Must",
    edasikandumine: "Automaat",
  },
  {
    mark: "Volkswagen",
    mudel: "Golf",
    aasta: 2020,
    varv: "Sinine",
    edasikandumine: "Manuaal",
  },
];

const carList = document.getElementById("car-list");

// loo tabel
const table = document.createElement("table");
table.className = "car-table";

// loo tabeli päis
const thead = document.createElement("thead");
thead.innerHTML = `
  <tr>
    <th>Mark</th>
    <th>Mudel</th>
    <th>Aasta</th>
    <th>Värv</th>
    <th>Edasikandumine</th>
  </tr>
`;
table.appendChild(thead);

// loo tabeli sisu
const tbody = document.createElement("tbody");
cars.forEach((car) => {
  const row = document.createElement("tr");
  row.innerHTML = `
    <td>${car.mark}</td>
    <td>${car.mudel}</td>
    <td>${car.aasta}</td>
    <td>${car.varv}</td>
    <td>${car.edasikandumine}</td>
  `;
  tbody.appendChild(row);
});
table.appendChild(tbody);

// lisa tabel lehele
carList.appendChild(table);

2: Loome styles.css

body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  color: #222;
}

h1 {
  text-align: center;
  margin-top: 1em;
}

#car-list {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

.car-table {
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.car-table th,
.car-table td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  text-align: left;
}

.car-table th {
  background: #eee;
}

3: Loome index HTML

<!DOCTYPE html>
<html lang="et">
  <head>
    <meta charset="UTF-8" />
    <title>Auto Andmed</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Auto Andmed</h1>
    <div id="car-list"></div>
    <script type="module" src="index.mjs"></script>
  </body>
</html>

Lõptulemus: