Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
Linha 1: | Linha 1: | ||
<!DOCTYPE html> | 2<!DOCTYPE html> | ||
<html lang="pt-BR"> | <html lang="pt-BR"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title> | <title>Busca de Imagens por Nome</title> | ||
<style> | <style> | ||
. | .input-group { margin-bottom: 1em; } | ||
.hidden { display: none; } | |||
.image-item { margin-bottom: 1em; } | |||
.image-info { margin-top: 0.5em; } | |||
.hidden { | |||
} | |||
.image-info { | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<form id=" | <form id="imageForm"> | ||
<div | <div class="input-group"> | ||
< | <input type="text" id="imageSearch" placeholder="Digite o nome da imagem"> | ||
<button type="button" id="searchImageButton">Buscar Imagem</button> | |||
< | |||
</div> | </div> | ||
<div id="imageContainer" class="image-container hidden"> | <div id="imageContainer" class="image-container hidden"> | ||
<!-- As imagens e suas informações serão exibidas aqui --> | <!-- As imagens e suas informações serão exibidas aqui --> | ||
Linha 224: | Linha 25: | ||
<script> | <script> | ||
const | // Lista de imagens e suas informações adicionadas manualmente | ||
const imageList = { | |||
'Charmander': { | |||
imageUrl: 'https://example.com/charmander.png', | |||
description: 'Charmander, o Pokémon de fogo inicial.' | |||
}, | }, | ||
'Bulbasaur': { | |||
imageUrl: 'https://example.com/bulbasaur.png', | |||
description: 'Bulbasaur, o Pokémon de grama inicial.' | |||
}, | }, | ||
'Squirtle': { | |||
imageUrl: 'https://example.com/squirtle.png', | |||
description: 'Squirtle, o Pokémon de água inicial.' | |||
} | } | ||
// Adicione mais imagens conforme necessário | |||
}; | }; | ||
document.getElementById(' | document.getElementById('searchImageButton').addEventListener('click', function() { | ||
const imageName = document.getElementById('imageSearch').value.trim(); | |||
const | |||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
if ( | if (imageName && imageList[imageName]) { | ||
const | const imageInfo = imageList[imageName]; | ||
imageContainer.innerHTML = ` | |||
<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> | ||
</div> | |||
`; | |||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} else { | } else { | ||
imageContainer. | imageContainer.innerHTML = 'Imagem não encontrada.'; | ||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} | } | ||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Edição das 01h33min de 30 de agosto de 2024
2<!DOCTYPE html> <html lang="pt-BR"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Busca de Imagens por Nome</title> <style> .input-group { margin-bottom: 1em; } .hidden { display: none; } .image-item { margin-bottom: 1em; } .image-info { margin-top: 0.5em; } </style>
</head> <body>
<form id="imageForm">
<input type="text" id="imageSearch" placeholder="Digite o nome da imagem"> <button type="button" id="searchImageButton">Buscar Imagem</button>
</form>
<script> // Lista de imagens e suas informações adicionadas manualmente const imageList = { 'Charmander': { imageUrl: 'https://example.com/charmander.png', description: 'Charmander, o Pokémon de fogo inicial.' }, 'Bulbasaur': { imageUrl: 'https://example.com/bulbasaur.png', description: 'Bulbasaur, o Pokémon de grama inicial.' }, 'Squirtle': { imageUrl: 'https://example.com/squirtle.png', description: 'Squirtle, o Pokémon de água inicial.' } // Adicione mais imagens conforme necessário };
document.getElementById('searchImageButton').addEventListener('click', function() { const imageName = document.getElementById('imageSearch').value.trim(); const imageContainer = document.getElementById('imageContainer');
if (imageName && imageList[imageName]) { const imageInfo = imageList[imageName];
imageContainer.innerHTML = `
<img src="${imageInfo.imageUrl}" alt="${imageName}">
Nome da Imagem: ${imageName}
Descrição: ${imageInfo.description}
URL: ${imageInfo.imageUrl}
`; imageContainer.classList.remove('hidden'); } else { imageContainer.innerHTML = 'Imagem não encontrada.'; imageContainer.classList.remove('hidden'); } }); </script>
</body> </html>