Ich möchte eine erweiterbare Listenansicht erstellen. In meinem Fall können Sie also alle Testergebnisse der Schüler sehen.
Versuchen Sie folgendes:
<!DOCTYPE html>
<html>
<body>
<p>
<label>Text box</label>
<input type="Search for names" id="myInput" onkeyup="search()" placeholder="Search for names..">
</p>
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="textOutCollapsible" class="collapse">
Lorem ipsum dolor text....
</div>
<p id="txtOut">
</p>
</body>
<script>
fetch('https://www.hatchways.io/api/assessment/students')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
var divOut = document.getElementById('txtOut');
var divOutCollapsible = document.getElementById('textOutCollapsible');
var allStudents = myJson.students;
for (var k in allStudents) {
let txtOut = '';
let listItem = document.createElement('li');
let values = allStudents[k].grades;
let sum = values.reduce((previous, current) => current += previous);
let avg = sum / values.length;
// we add the name as part of the dataset
listItem.dataset.nombre = allStudents[k].firstName.toUpperCase();
txtOut += `<b>${allStudents[k].firstName}</b><br />`;
txtOut += `email: ${allStudents[k].email}<br />`;
txtOut += `Company: ${allStudents[k].company}<br />`;
txtOut += `Skill: ${allStudents[k].skill}<br />`;
txtOut += `Average: ${avg}<br />`;
txtOut += `<img src="${allStudents[k].pic}"><hr />`;
textOutCollapsible += `Average: ${allStudents[k].grades}<br />`;
listItem.innerHTML = txtOut, textOutCollapsible;
divOut.appendChild(listItem);
divOutCollapsible.appendChild(listItem);
}
});
function search() {
// Declare variables
const prefix = document.getElementById( 'myInput' ).value.toUpperCase( );
const ul = document.getElementById( 'txtOut' );
const childs = ul.getElementsByTagName( 'li' );
var idx = -1, item;
while(item = childs.item(++idx)){
item.style.display = item.dataset['nombre'].startsWith(prefix) ? 'initial': 'none';
}
}
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</html>
Aber es gibt mir nur einen Knopf.
Ich habe auch versucht, den Durchschnittsmittelwert für jeden Schüler zu berechnen und die Details beim Drücken des Buttons in Form eines Kreuzes anzuzeigen, aber es gibt mir Zahlen zu groß, um wahr zu sein.
Wenn Sie Ideen haben, wie Sie das CSS reproduzieren können, bin ich interessiert :)
