Ülesande eesmärk: Õppida töötama objektide massiiviga JavaScriptis, dünaamiliselt moodustama ja kuvama struktureeritud andmeid (autode omadused) tabelina veebilehel, kasutades mallijadasid ja massiivi meetodeid.
- Ava veebilehitsejas Code Sandbox sait
- Vali kollase taustaga JavaScript
3. Loo fail index.js
4. Sisesta pildil näidatud kood:
import "./styles.css";
const myjson = [
{
Car: {
Color: "Rose red",
"Tinted windows": true,
},
},
];
document.getElementById("app").innerHTML = `
<div id="json">
<h1>Car properties</h1>
<p>Color: ${myjson[0].Car.Color}</p>
<p>Tinted windows: ${myjson[0].Car["Tinted windows"]}</p>
</div>
`;
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="./index.js" type="module"></script>
</body>
</html>
styles.css
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th,
td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
tr.tinted {
background-color: #e0f7fa;
}
ul.entertainment-list {
margin: 5px 0 0 20px;
padding-left: 20px;
list-style-type: disc;
color: #333;
}
5. Loo objektide massiiv masinate andmetega — deklareeri muutuja CARS ja täida see tabelist pärit andmetega.
import "./styles.css";
// masiiv
const cars = [
{
Name: "Honda",
Color: "Rose red",
"Tinted windows": false,
Wheels: 4,
"Roof cargo": null,
Entertainment: [
"FM Radio",
"MP3, MP4 and MKV player",
"harman/kardon speakers",
],
Accessories: ["satnav", "cruise control"],
},
{
Name: "Saab",
Color: "Navy blue",
"Tinted windows": true,
Wheels: 4,
"Roof cargo": "Thule",
Entertainment: [
"FM Radio",
"Apple CarPlay/Android Auto",
"Bowers & Wilkins Premium Sound speakers",
],
Accessories: ["self drive system", "luggage cover"],
},
{
Name: "BMW",
Color: "Black",
"Tinted windows": true,
Wheels: 4,
"Roof cargo": "Thule",
Entertainment: ["FM Radio", "MP3 and MKV player", "harman/kardon speakers"],
Accessories: ["satnav", "cruise control"],
},
];6. Kirjutage kood, et väljastada teave massiivist CARS elemendile id app
//näitame html tableina
function displayCars(carsArray) {
document.getElementById("app").innerHTML = `
<div id="json">
<h1>Car Properties</h1>
<table>
<thead>
<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>
</thead>
<tbody>
${carsArray
.map(
(car) => `
<tr class="${car["Tinted windows"] ? "tinted" : ""}">
<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>
<ul style="margin: 5px 0 0 0; padding-left: 20px;">
${car.Entertainment.map((e) => `<li>${e}</li>`).join("")}
</ul>
</td>
<td>
${car.Accessories.join(", ")}
</td>
</tr>
`
)
.join("")}
</tbody>
</table>
</div>
`;
}7. Salvesta ja uuenda leht.
Näete massiivist genereeritud autode nimekirja koos nende omadustega.
Kokkuvõte:
Auto andmed on JSON masiivis mida pärast me kuvame html tabelina, JS abil.
Ülesanne
- Lisage igale autole nupp „Näita/peida meelelahutus”.
- Vaikimisi peab meelelahutuse nimekiri (Entertainment) olema peidetud.
- Nupule vajutamisel peab meelelahutuse nimekiri ilmuma auto alla.
- Uuesti vajutamisel peab meelelahutuse nimekiri peituma.
Etapid
- Kirjutage funktsioon (näiteks displayCars), mis kuvab lehele autode nimekirja ja auto põhiomadused. Lisage nupp „Näita/peida meelelahutus”. Meelelahutus (Entertainment) on vaikimisi peidetud.
//näitame html tableina
function displayCars(carsArray) {
document.getElementById("app").innerHTML = `
<div id="json">
<h1>Car Properties</h1>
<table>
<thead>
<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>
</thead>
<tbody>
${carsArray
.map(
(car, index) => `
<tr class="${car["Tinted windows"] ? "tinted" : ""}">
<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>
<button class="toggle-entertainment" data-index="${index}">
Show Entertainment (${car.Entertainment.length})
</button>
<ul class="entertainment-list" id="entertainment-${index}" style="display:none; margin: 5px 0 0 0; padding-left: 20px;">
${car.Entertainment.map((e) => `<li>${e}</li>`).join("")}
</ul>
</td>
<td>
${car.Accessories.join(", ")}
</td>
</tr>
`
)
.join("")}
</tbody>
</table>
</div>
`;2. Lisage sündmuse töötleja nuppudele „Näita/peida meelelahutused”. Nupule klõpsates näidake või peidake meelelahutuste loendit.
document.querySelectorAll(".toggle-entertainment").forEach((button) => {
button.addEventListener("click", () => {
const index = button.getAttribute("data-index");
const list = document.getElementById(`entertainment-${index}`);
const car = carsArray[index];
const count = car.Entertainment.length;
if (list.style.display === "none") {
list.style.display = "block";
button.textContent = `Hide Entertainment (${count})`;
} else {
list.style.display = "none";
button.textContent = `Show Entertainment (${count})`;
}
});
});
}3. Kutsuge välja funktsioon displayCars(cars), et kuvada andmed lehe laadimisel.
displayCars(cars);styles.css
button.toggle-entertainment {
padding: 5px 10px;
cursor: pointer;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
border-radius: 4px;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
button.toggle-entertainment:hover {
background-color: #0056b3;
}Käivitage projekt ja veenduge, et kuvatakse nupp meelelahutuste arvuga. Vaikimisi on meelelahutuste loend peidetud, nupule klõpsates kuvatakse või peidetakse loend ning nupu tekst muutub, kuvades kas „Kuva meelelahutused (3)” või „Peida meelelahutused (3)”.
