0
I want to create an expandable list view. In my case, you can see all the students' test results.
Try the following:
<!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>But that only gives me one button. I also tried to calculate the average of each student and show the details by pressing the button in the shape of a cross, but this gives me numbers a little too big to be true. Here is an image:
If you have ideas on how to play CSS I’m interested :)
Why reinvent the wheel? For certain things it is better to simplify. There are N numbers of frameworks with Collapsible implemented.
– LeAndrade
@Leandrade I didn’t know that, I’m just starting with these languages
– Revolucion for Monica
Gives a searched in Bootstrap, Materialize, Semanticui, Uikit, etc...
– LeAndrade