JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>JS</title>
</head>
<body>
<div id="master">
<button onClick="orderName()">Ordenar por nome</button>
<button onClick="orderIdade()">Ordenar por idade</button>
<button onClick="mostrarMulheres()">Exibir apenas mulheres</button>
<button onClick="mostrarHomens()">Exibir apenas homens</button>
<button onClick="mostrarTodos()">Exibir todos</button>
<ul id="lista-usuarios">
<!-- Lista de usuários -->
</ul>
</div>
<script>
var users = [
{
nome: 'João',
idade: 23,
sexo: 'M',
},
{
nome: 'Ana',
idade: 19,
sexo: 'F',
},
{
nome: 'Ricardo',
idade: 32,
sexo: 'M',
},
{
nome: 'Fernanda',
idade: 25,
sexo: 'F',
}
];
var list = document.querySelector("#lista-usuarios");
function getAllUsers() {
users.forEach(user => {
var item = document.createElement("li");
if (user.sexo == "M")
var fullSex = "homem";
else
var fullSex = "mulher";
item.innerHTML = user.nome + " é " + fullSex + " e possui " + user.idade + " anos";
list.appendChild(item);
});
}
// Chamando todos os usuários logo ao carregar a página
getAllUsers();
function orderName() {
//
}
function orderIdade() {
//
}
function mostrarMulheres() {
// Limpar todos os elementos da lista HTML
var listaHTML = document.querySelectorAll("#lista-usuarios li");
for (i = 0; i < listaHTML.length; i++) {
var...