Creando las imagenes con JavaScript
Clase 22 de 29 • Curso de Manipulación del DOM
Contenido del curso
fermin martin
student•
hace 5 años
Jimmy Buriticá Londoño
student•
hace 5 años
Eliseo Ávila
student•
hace 5 años
fermin martin
Jimmy Buriticá Londoño
Eliseo Ávila
Diego Grueso
Sebastián Buitrago
Fredy A. Yomayuza Colorado
Yomar Gutierrez
Jimmy Buriticá Londoño
Nazareno Aznar Altamiranda
Víctor Illanes Soto
Carlos Eduardo Gomez García
Alexis Steven Valderrama
Dario Paladines
Erick Alejandro Graterol Barico
Melba Indhira Tejada Leonardo
Seba Cardoso
Brayan Ramirez Alzate
Andres Felipe Pinchao Ramirez
Wilmion Navarrete
Edgar Lopez Arroyo
Nazareno Aznar Altamiranda
José Rodolfo Figueroa Chávez
Francisco Javier Pecino Leon
Erick Alejandro Graterol Barico
Juan Esteban Galvis
Joseph Manuel Salen Pantoja
Melba Indhira Tejada Leonardo
Jonathan 🦑 Alvarez
Melba Indhira Tejada Leonardo
Jean Bustamante
Hugo Herrera
Wilker Vivas
Kevin Isaí Santiago López
Edgar Gomez
Kevin Ramirez
🙂Me encanta la honestidad con la que dice que no es necesario aprenderse las fórmulas de memoria
Tienes razón, también me ha gustado esto del profesor. En términos generales se nota que Jonathan maneja muy bien el tema y es un excelente profesor.
Es un gran profesor 💥
Chic@s, PARA LOS QUE RECIEN VEN EL VIDEO, una sugerencia, no hay necesidad de calcular un valor random. solo es leer. en la pagina donde extraemos los datos. tiene este texto.
API is Available: https://randomfox.ca/floof
ya con eso hacen la petición fetch y les entrega el resultado. no he visto el video pero observe que todos los compañeros calcularon un número random para tener ese dato aleatorio en la imagen
que dato tan interesante bro
y como se utiliza ese dato..?
Reto antes de ver el codigo:
const getRandomInt = (min, max) => { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }; const addImage = () => { const app = document.querySelector('#app'); const image = document.createElement('img'); image.width = '320'; image.src = `https://randomfox.ca/images/${getRandomInt(1, 120)}.jpg`; image.alt = 'cute fox'; image.className = 'mx-auto rounded'; const imageContainer = document.createElement('div'); imageContainer.className = 'p-4'; imageContainer.append(image); app.append(imageContainer); }; const adButton = document.createElement('button'); adButton.textContent = 'Agregar Imagen'; adButton.className = 'text-white px-3 py-2 rounded-lg bg-indigo-600 focus:outline-none'; adButton.addEventListener('click', addImage); const cleanButton = document.createElement('button'); cleanButton.className = 'rounded-lg mt-5 px-3 py-2 text-indigo-600 border border-indigo-600 focus:outline-none'; cleanButton.textContent = 'Limpiar'; const container = document.createElement('div'); container.className = 'flex flex-col items-center'; container.append(adButton, cleanButton); const app = document.querySelector('#app'); app.append(container);```
Me gusto tu función getRandomInt(), En la función addImage() no es necesario definir de nuevo app, ya que al final del código la estas definiendo global.
Tengo una duda, por qué a la funcion random se la multiplica por (max - min + 1) en vez de directamente el max? Es algo que puede cambiar si cambia el minimo?en ese caso, el +1 debería ir siempre o se modifica el numero dependiendo del mínimo?
return Math.floor(Math.random() * (max - min + 1) + min);
Realizado con ASYNC/AWAIT
Dato curioso, la función random() que creamos aquí es la misma función random que vimos en el curso gratis de programación básica 👀.
.
De nuevo me gustaría recordar que no es necesario agregar un mountNode = document.querySelector("images"), esto porque HTML al ver que existe un id llamado images automágicamente crea una variable dentro de JavaScript con ese nombre :D.
.
Les dejo el código de esta clase:
.
Creando imágenes con JavaScript
De hecho me hiciste recordar que el el curso de fundamentos de JS, también lo enseñaban a hacer. Es muy útil saber como generar contenido aleatorio :)
Tal cual, yo fui a ver el curso de prog básica para recordar esa función random() y hacerla antes que el profe lo hiciera
Problemas tipicos en despliegue o consumos de APIS
Hay un problema cuando consumes una API y la despliegas en un servidor y es que el servidor al menos en github, no deja que tu API o codigo AJAX obtenga o envie información a sitios no seguros, esto ni siquiera lo sabia, y cuando desplegué mi sitio en github pages me tope con este problema. .
Como lo solucionas ?
Muy simple debes de asegurarte de que tu JS obtenga todo via HTTPS, la S es muy importante y lo otro es colocar la etiqueta Meta con su equivalente http-equiv o name tambien es posible, añadir un policy y listo todo quedo !
<!--Esta etiqueta es muy importante para tu API --> <meta http-equiv= content-security-policy content= upgrade-insecure-requests>
Por fin ya pienso que la programación es para humanos uff. Pensaba que era para genios.
Los genios son humanos tambien jaja/
Tenía el código así pero me decía que el resultado de la función era undefined
const random = () => { Math.floor(Math.random() * (maximun - minimun)) + minimun };
Luego lo puse como arrow function y funcionó
const random = () => Math.floor(Math.random() * (maximun - minimun)) + minimun``` Lo que no sé es por qué hay diferencia
APUNTES DE LA CLASE SIN FALTA :)
//genamos un numero random para crear imagenes aleatorias const maximun = 121; const minimun = 1; const random = () => Math.floor(Math.random()*(maximun - minimun)+ minimun) // creamos la imagen const createImageNode = () => { //creamos el contenedor de imagenes const container = document.createElement('div'); container.className = "p-4"; //creamos la imagen y agregamos las propiedades + el link de la imagen const imagen = document.createElement('img'); imagen.className = "mx-auto"; imagen.width = '320'; imagen.src = `https://randomfox.ca/images/${random()}.jpg`; // agregamos la imagen al contenedor container.appendChild(imagen) //retornamos el container return container }; //guardaremos la imagen en una variable //const nuevaImagen = createImageNode(); //obtenemos el contenedor padre donde estaran todos nuestros elementos const mountNode = document.getElementById('imagenes'); //agregamos las imagenes al contenedor padre //mountNode.append(nuevaImagen, createImageNode()); //creamos una funcion para agregar la imagen cuando damos clic a un boton //obtenemos el boton const addboton = document.querySelector('button'); const addImage = () => { //guardamos la imagen que recibimos retornada de la funcion en una variable const newImage = createImageNode(); //agregamos la imagen al contenedor padre mountNode.append(newImage) } addboton.addEventListener('click', addImage);
En la funcion random se puede simplificar asi
const random = (maximo) => { return Math.floor((Math.random()*maximo - 1)+ 1)) }
Muy buena, tu decides que limite tiene 👍
retruco 8)
const randomNum = max => Math.floor((Math.random()* max -1) + 1);
Math.random() es una funcion que te retorna un valor entre 0 y 1, para simplificar un poco la fórmula que nos dió el profesor podemos multiplicar el resultado por 122 que es el máximo de imagenes que devuelve el api. Y a ésto le aplicamos el Math.floor() para redondear el resultado.
Entonces la formula quedaría de ésta forma:
const random = Math.floor(Math.random() * 122)
no me salen los calculos...
Lo que mas me a gustado del Curso.
Me gusta mucho el Lazy Loading como tecnica de carga y las APIS. Es increíble como se siente someter una API o tener todos esos datos en un solo lugar.
Con lo que aprendí del curso consumí una API que obtiene información de la pelicula o serie que tu quieras pueden probarla aca. https://erickuu.github.io/api-movie/ . El diseno es algo simple y el responsive design a veces se rompe dependiendo del cel, pero es lo de menos.
Si quieren usar lo de random directamente existe un paquete en npm que lo hace (más algunas validaciones): https://www.npmjs.com/package/number-random
Mi código antes de ver la clase 😄 . HTML
<div id="imagesApp"> </div>
. JavaScript
const URL = "https://randomfox.ca/floof/"; const imagesApp = document.getElementById("imagesApp"); const btnAdd = document.getElementById("btn-add"); const getImage = async () => { const res = await fetch(URL); const data = await res.json(); return data.image; }; const addImg = async () => { const container = document.createElement("figure"); container.className = "p-4"; const img = document.createElement("img"); img.className = "mx-auto fox-img"; img.src = await getImage(); container.appendChild(img); imagesApp.appendChild(container); }; btnAdd.addEventListener("click", addImg);
. Lo único que añadí de CSS jeje
.fox-img { width: 320px; }
Me da este error:
Hola @IndhiraTejada!
Qué tienes dentro de tu index.js? Al parecer hay un error de sintaxis allí 🤔
Gracias, Profe, lo chequearé.
Haciendo pruebas y siguiendo el curso como el profesor indica de guardar los elementos en un array y hacer un solo append, me di cuenta que cuando hacía click en el botón por una segunda vez, se supone que debía mostrar la primera imágen repetida, ya que el array ya tenía un elemento guardado, pero esto no sucedía y después un rato encontré que si no usamos .cloneNode(true), el DOM detecta que es un nodo duplicado y no lo inserta o algo así.
A pesar de que no quería que se clonaran los nodos para esta práctica, quería saber porqué pasaba eso y me llevó un rato encontrarlo 🧐.
No es necesario crear la funcion random, basta con usar la API de la página. Aquí la solución:
const baseUrl = 'https://randomfox.ca/floof'; const card = document.getElementById('images'); const addButton = document.querySelector('button'); const newImage = () => fetch(baseUrl) .then(response => response.json()) .then(data => { const imagecontainer = document.createElement('div'); imagecontainer.className = 'p-4'; const image = document.createElement('img'); image.className = 'mx-auto'; image.width = '320'; image.src = data.image; imagecontainer.appendChild(image); card.append(imagecontainer); }); addButton.addEventListener('click', newImage); ```const baseUrl = 'https://randomfox.ca/floof'; const card = document.getElementById('images'); const addButton = document.querySelector('button'); const newImage = () => fetch(baseUrl) .then(response => response.json()) .then(data => {     const imagecontainer = document.createElement('div');   imagecontainer.className = 'p-4';   const image = document.createElement('img');   image.className = 'mx-auto';   image.width = '320';   image.src = data.image;   imagecontainer.appendChild(image);   card.append(imagecontainer);     }); addButton.addEventListener('click', newImage);
Mi solucion antes de ver el video
const boton = document.getElementById("boton") const raro = function(){ const numeroAlea = Math.round(Math.random() * 122) return numeroAlea } function accion() { const contenedor = document.createElement("div"); contenedor.className = "p-4" const image = document.createElement("img"); image.className = "mx-auto"; image.src = `https://randomfox.ca/images/${raro()}.jpg`; image.width = "320" padre.appendChild(image); } boton.addEventListener("click", accion)
Asi resolvi el reto🦊:
// guardamos la API en una variable const API = 'https://randomfox.ca/floof'; // obtenemos la app const appNode = document.querySelector('#app');
// función para consultar api async function fetchData(urlAPI) { const response = await fetch(urlAPI); const data = await response.json(); return data; }
async function getImage(urlAPI) { const data = await fetchData(urlAPI); // crear imagen const image = document.createElement('img'); image.src = await data.image; image.width = '320'; image.className = 'mx-auto'; // crear imgContainer const imgContainer = document.createElement('div'); imgContainer.className = 'p-4'; imgContainer.append(image); // se agrega al padre appNode.append(imgContainer); }
// crear boton const addImg = async ()=> { // Texto y sus estilos const txtBoton = document.createElement('span'); txtBoton.textContent = 'Cargar imagen' txtBoton.className = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0' // boton y sus estilos const boton = document.createElement('button'); boton.className = 'relative inline-flex items-center justify-center mt-4 p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800' boton.append(txtBoton); //Crear evento await boton.addEventListener('click', ()=>{getImage(API)}); // agregar al padre appNode.append(boton); } addImg();
Y listo 🦊
saludos, interesante, gracias por compartir
Mi versión del desafío que dejó al comienzo:
const API = 'https://placekitten.com/g/500/200'; async function fetchData(APIurl) { try { const res = await fetch(APIurl); const data = res.url; return data; } catch (error) { return new Error(error) } } async function getKittyImage(api) { const app = document.querySelector('#app'); const addKitt = document.querySelector('#app button') const container = document.createElement('div'); addKitt.addEventListener('click', async () => { const res = await fetchData(api); const image = document.createElement('img'); image.src = res; image.className = 'mx-auto mb-5'; image.width = '320'; container.append(image); }) app.insertAdjacentElement('beforeend', container); } getKittyImage(API)