Vladislav Kudriašev Portfoolio

en_US
Noorem Tarkvaraarendaja eriala

H2: Codesandbox-is HTML leht, mis kuvab auto andmeid

JavaScript
import "./styles.css";

// Masiiv
const car = [
  {
    Name: "Honda Civic",
    Color: "Green",
    "Tinted windows": true,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM Radio",
      "MP3, MP4 and MKV player",
      "Harman/Karbon speakers",
    ],
    Accessories: ["Satnav", "Cruise control"],
  },
  {
    Name: "Saab",
    Color: "Gray",
    "Tinted windows": false,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: ["FM Radio", "MP3, MP4 and MKV player"],
    Accessories: ["Satnav", "Cruise control"],
  },
  {
    Name: "Toyota",
    Color: "Blue",
    "Tinted windows": true,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: ["FM Radio", "MP3, MP4 and MKV player"],
    Accessories: ["Satnav"],
  },
];

// Näitame HTML tableina
document.getElementById("app").innerHTML = `
<div>
    <h1>Car properties</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Color</th>
            <th>Tinted windows</th>
            <th>Wheels</th>
            <th>Roof cargo</th>
            <th>Entertainment</th>
            <th>Accessories</th>
        </tr>

        <tbody>
        ${car
          .map(
            (car) =>
              `<tr>
            <td>${car.Name}</td>
            <td>${car.Color}</td>
            <td>${car["Tinted windows"] ? "Yes" : "No"}</td>
            <td>${car.Wheels}</td>
            <td>${car["Roof cargo"] || "None"}</td>
            <td>${car.Entertainment.map((e) => "🤡" + e).join(", ")}</td>
            <td>${car.Accessories.map((e) => "👀" + e).join(", ")}</td>
          </tr>`
          )
          .join("")}
        </tbody>
    </table>
</div>
`;
CSS
body {
  font-family: sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

thead {
  background-color: #333;
  color: white;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #d1e7fd;
}

Kokkuvõtte

Auto andmed on JSON massiivis mida pärast me kuvame HTML tabelina JavaScript’i abil.