5 801
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 16: | Linha 16: | ||
<div class="input-group"> | <div class="input-group"> | ||
<input type="text" id="imageSearch" placeholder="Digite o nome da imagem"> | <input type="text" id="imageSearch" placeholder="Digite o nome da imagem"> | ||
</div> | </div> | ||
Linha 42: | Linha 41: | ||
}; | }; | ||
document.getElementById(' | document.getElementById('imageSearch').addEventListener('input', function() { | ||
const | const searchValue = this.value.trim().toLowerCase(); | ||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
let imagesHtml = ''; | |||
if (imageName | Object.keys(imageList).forEach(imageName => { | ||
if (imageName.toLowerCase().includes(searchValue)) { | |||
const imageInfo = imageList[imageName]; | |||
imagesHtml += ` | |||
<div class="image-item"> | |||
<img src="${imageInfo.imageUrl}" alt="${imageName}"> | |||
<div class="image-info"> | |||
<b>Nome da Imagem</b>: ${imageName} <br> | |||
<b>Descrição</b>: ${imageInfo.description} <br> | |||
<b>URL</b>: ${imageInfo.imageUrl} | |||
</div> | |||
</div> | |||
`; | |||
} | |||
}); | |||
imageContainer.innerHTML = | if (imagesHtml) { | ||
imageContainer.innerHTML = imagesHtml; | |||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} else { | } else { | ||
imageContainer.innerHTML = ' | imageContainer.innerHTML = 'Nenhuma imagem encontrada.'; | ||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} | } |