//ARRAY DE LAS PALABRAS PARA EL INPUT
const array_paraules = [
"flor",
"manta",
"fleca",
"ment",
"feli",
"menta",
"fletxa",
];
//ARRAY DE LAS IMAGENES PARA COMPARAR CON LAS PALABRAS
const array_imatges = [
"flor.jpg",
"manta.jpg",
"fleca.jpg",
"ment.webp",
"feli.jpg",
"menta.jpg",
"fletxa.jpg",
];
//Creamos un elemento IMG específico para la foto que ha de salir cuando ninguna palabra coincide
let what = document.createElement("IMG");what.setAttribute("src", "img/quedices.jpg"); //Ruta y nombre de dicha fotowhat.setAttribute("width", "220");what.setAttribute("height", "161");what.setAttribute("id","what"); //Le ponemos un idwhat.hidden = true; //Decimos que esté oculta por defecto
document.body.appendChild(what); //Elemento que sea hijo del body
let idWhat = document.getElementById("what"); //Guardamos la id de la foto "quedices.jpg" en una variable
window.onload = function () { let paraula = document.getElementById("paraula"); paraula.addEventListener("keyup",buscar); //addEventListener del input para sacar las fotos paraula.addEventListener("keyup",quedices); //FUNCIÓN NUEVA PARA LA FOTO DE QUEDICES}
function buscar(){ let contenidor = document.getElementById("contenidor"); //Recogemos id del div let txt = paraula.value; //Recogemos el valor del texto que escribimos en el input
let tope = array_paraules.length; //Guardamos en una variable la longitud del array
//Bucle que selecciona todos los elementos IMG y luego los borra (para que posteriormente aparezcan
// y se vayan borrando depende de lo que pongas en el input, para no tener muchisimas fotos en oculto)
for(let img of contenidor.querySelectorAll('img')){ img.parentNode.removeChild(img);
}
//Bucle que recorre el array_paraules
for(let i = 0; i<tope; i++){ //Creamos un elemento IMG para todas las fotos
let foto = document.createElement("IMG"); //Si la longitud del texto = 0 continua con el bucle
if(txt.length == 0){ continue;
}
//Si el contenido del array coincide con el texto, crea las fotos del array_imatges
else if(array_paraules[i].substring(0,txt.length) == txt){
foto.setAttribute("src", "img/"+array_imatges[i]); foto.setAttribute("width", "220"); foto.setAttribute("height", "161"); foto.setAttribute("id","imatge"+i); //ID de las imagenes del array contenidor.appendChild(foto);
foto.style.display = "block";
let idImg = document.getElementById("imatge"+i); //Recogemos la id de las imagenes
//Si el raton se pone encima de las fotos las hace mas grandes
idImg.addEventListener("mouseover",function(){ idImg.style.width = "400px";
idImg.style.height = "300px";
});
//Si el raton sale de las fotos las devuelve al tamaño original
idImg.addEventListener("mouseout",function(){ idImg.style.width = "220px";
idImg.style.height = "161px";
});
}
}
}
//FUNCIÓN PARA QUE SALGA LA FOTO QUE DICES EN CASO DE QUE NADA COINCIDA
function quedices(){ let txt = paraula.value; //valor del input
let tope = array_paraules.length; //longitud del array_paraules
//bucle que recorre array_paraules
for(let j = 0; j<tope; j++){ //Si la longitud del texto NO es 0 y el contenido del array es diferente al texto muestra la foto que dices
if(txt.length !== 0 && array_paraules[j].substring(0,txt.length) !== txt){
what.hidden = false;
idWhat.style.display = "block";
//Si la longitud es diferente a 0 y el contenido del array es igual al texto del input ocultala
}else if(tope !== 0 && array_paraules[j].substring(0,txt.length) == txt){ what.hidden = true;
idWhat.style.display = "none";
}
}
}
