Harjutus: Loo Codesandbox-is HTML leht, mis kuvab auto andmeid
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="./index.mjs" type="module"></script>
</body>
</html>
index.mjs
import "./styles.css";
const car = [
{
Name: "audi",
Color: "red",
"Tinted windows": false,
Wheel: 4,
"Roof cargo": null,
Entertainment: [
"FM radio",
"MP3, MP4 and MKV player",
"harman/karben speakers",
],
Accessories: ["satnav", "cruise control"],
},
{
Name: "porsche",
Color: "blue",
"Tinted windows": false,
Wheel: 4,
"Roof cargo": null,
Entertainment: [
"FM radio",
"MP3, MP4 and MKV player",
"harman/karben speakers",
],
Accessories: ["satnav", "cruise control"],
},
{
Name: "mersedez",
Color: "black",
"Tinted windows": false,
Wheel: 4,
"Roof cargo": null,
Entertainment: [
"FM radio",
"MP3, MP4 and MKV player",
"harman/karben speakers",
],
Accessories: ["satnav", "cruise control"],
},
];
document.getElementById("app").innerHTML = `
<div>
<h1>Car Properties</h1>
<table border="1">
<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>
${car
.map(
(carItem) => `
<tr>
<td>${carItem.Name}</td>
<td>${carItem.Color}</td>
<td>${carItem["Tinted windows"]}</td>
<td>${carItem.Wheel}</td>
<td>${
carItem["Roof cargo"] ? carItem["Roof cargo"] : "None"
}</td>
<td>${carItem.Entertainment.join(", ")}</td>
<td>${carItem.Accessories.map((e) => "😂" + e).join(", ")}</td>
</tr>
`
)
.join("")}
</table>
</div>
`;
Kokkuvõtte:
Auto andmed on JSON masiivis, mida pärast me kuvame html tabelina JS abil.
