0 Daumen
245 Aufrufe

Ich möchte eine erweiterbare Listenansicht erstellen. In meinem Fall können Sie also alle Testergebnisse der Schüler sehen.

frontend_collapse.png 


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 :)

von

Ein anderes Problem?

Stell deine Frage

Willkommen bei der Stacklounge! Stell deine Frage sofort und kostenfrei

x
Made by a lovely community