GiorgeLucas
commented
1 year ago Equipe Vikings
Resultado
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Live User Filter</title>
</head>
<body>
<div class="container">
<header class="header">
<h4 class="title">Live User Filter</h4>
<small class="subtitle">Search by name and/or location</small>
<input type="text" id="filter" placeholder="Search">
</header>
<ul id="result" class="user-list">
<li>
<h3>Loading...</h3>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>CSS
body {
background-color: #eee;
font-family: sans-serif;
}
.container {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
.header {
margin-bottom: 20px;
}
.title {
font-weight: bold;
font-size: 30px;
color: #333;
}
.subtitle {
font-weight: bold;
font-size: 14px;
color: #999;
margin-bottom: 10px;
}
#filter {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
font-size: 18px;
border-radius: 4px;
outline: none;
}
.user-list {
margin-top: 20px;
padding: 0;
list-style-type: none;
}
.user-list li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.user-list h3 {
font-size: 18px;
color: #444;
margin: 0;
}JS
const filter = document.getElementById("filter");
const result = document.getElementById("result");
const users = [
{name: "Sara Jones", location: "New York"},
{name: "John Doe", location: "California"},
{name: "Robert Smith", location: "Florida"},
{name: "Michael Johnson", location: "Texas"},
{name: "Alex Williams", location: "New Jersey"},
];
const html = users
.map(
(user) => `
<li>
<h3>${user.name}, ${user.location}</h3>
</li>
`
)
.join("");
result.innerHTML = html;
filter.addEventListener("keyup", (e) => {
const text = e.target.value.toLowerCase();
const matches = users.filter((user) => {
const regex = new RegExp(text, "gi");
return user.name.match(regex) || user.location.match(regex);
});
outputHtml(matches);
});
const outputHtml = (matches) => {
if (matches.length > 0) {
const html = matches
.map(
(match) => `
<li>
<h3>${match.name}, ${match.location}</h3>
</li>
`
)
.join("");
result.innerHTML = html;
} else {
result.innerHTML = `
<li>
<h3>No results found...</h3>
</li>
`;
}
};
Contact Details
iury.oliveira@ifto.edu.br
Challenge Description
Olá, minhas queridas crianças inocentes! Hoje vamos falar sobre um desafio de programação super legal, que é a construção de um Live User Filter. Essa é uma ferramenta muito útil em desenvolvimento web, pois permite que os usuários encontrem informações específicas de maneira rápida e eficiente.
O Live User Filter é basicamente um campo de pesquisa em que, à medida que o usuário digita um nome, os resultados vão sendo filtrados em tempo real. Isso significa que não é necessário clicar em nenhum botão de pesquisa, ou atualizar a página para ver os resultados. É tudo em tempo real, e super fácil de usar!
Mas por que isso é importante em desenvolvimento web? Bom, a resposta é simples: a experiência do usuário. Quando os usuários acessam um site, eles esperam encontrar o que precisam de maneira rápida e fácil. Com o Live User Filter, isso é possível. Além disso, a ferramenta ajuda a manter os usuários no site por mais tempo, já que eles não precisam sair da página para buscar informações em outro lugar.
Agora, vamos às dicas de comandos CSS e JS que podem ajudar vocês nesse desafio. Para criar o campo de pesquisa, vocês podem usar um elemento do HTML e adicionar alguns estilos CSS para deixar o layout mais bonito e atrativo. Para fazer a filtragem em tempo real, é necessário usar JavaScript, e a função mais indicada para isso é o .filter(). Além disso, é importante lembrar de adicionar alguns eventos, como o evento de "keyup" para detectar quando o usuário está digitando.
Bom, minhas crianças inocentes, é isso! Espero que vocês tenham gostado desse desafio e estejam animados para colocar a mão na massa. Não se esqueçam de se divertir e serem criativos em seus códigos. Boa sorte!
Exemplo
https://user-images.githubusercontent.com/30157522/224549539-977e5d9e-6f8d-4845-89e9-960f45c4e4a4.mp4
Additional tips
Código HTML