Creando las imagenes con JavaScript

Clase 22 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

fermin martin

student•

🙂Me encanta la honestidad con la que dice que no es necesario aprenderse las fórmulas de memoria

Jimmy Buriticá Londoño

student•

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.

Eliseo Ávila

student•

Es un gran profesor 💥

Diego Grueso

student•

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

Sebastián Buitrago

student•

que dato tan interesante bro

Fredy A. Yomayuza Colorado

student•

y como se utiliza ese dato..?

Yomar Gutierrez 

student•

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);```

Jimmy Buriticá Londoño

student•

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.

Nazareno Aznar Altamiranda

student•

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);

Víctor Illanes Soto

student•

Realizado con ASYNC/AWAIT

Carlos Eduardo Gomez García

teacher•

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

Alexis Steven Valderrama

student•

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 :)

Dario Paladines

student•

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

Erick Alejandro Graterol Barico

student•

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>

Melba Indhira Tejada Leonardo

student•

Por fin ya pienso que la programación es para humanos uff. Pensaba que era para genios.

Seba Cardoso

student•

Los genios son humanos tambien jaja/

Brayan Ramirez Alzate

student•

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

Andres Felipe Pinchao Ramirez

student•

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);

Wilmion Navarrete

student•

En la funcion random se puede simplificar asi

const random = (maximo) => {
    return Math.floor((Math.random()*maximo - 1)+ 1))
}

Edgar Lopez Arroyo

student•

Muy buena, tu decides que limite tiene 👍

Nazareno Aznar Altamiranda

student•

retruco 8)

const randomNum = max => Math.floor((Math.random()* max -1) + 1);

José Rodolfo Figueroa Chávez

student•

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)

Francisco Javier Pecino Leon

student•

no me salen los calculos...

Erick Alejandro Graterol Barico

student•

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.

https://devdocs.io https://devdocs.io/dom/

Juan Esteban Galvis

student•

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

Joseph Manuel Salen Pantoja

student•

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;
}

Melba Indhira Tejada Leonardo

student•

Me da este error:![](

Jonathan 🦑 Alvarez

teacher•

Hola @IndhiraTejada!

Qué tienes dentro de tu index.js? Al parecer hay un error de sintaxis allí 🤔

Melba Indhira Tejada Leonardo

student•

Gracias, Profe, lo chequearé.

Jean Bustamante

student•

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 🧐.

Hugo Herrera

student•

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 => { &#x20;

&#x20;   const imagecontainer = document.createElement('div');
&#x20;   imagecontainer.className = 'p-4';

&#x20;   const image = document.createElement('img');
&#x20;   image.className = 'mx-auto';
&#x20;   image.width = '320';
&#x20;   image.src = data.image;

&#x20;   imagecontainer.appendChild(image);
&#x20;   card.append(imagecontainer);
&#x20;  &#x20;
});
addButton.addEventListener('click', newImage);

Wilker Vivas

student•

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)

Kevin Isaí Santiago López

student•

Asi resolvi el reto🦊:

Guardar la api y el padre

// guardamos la API en una variable
const API = 'https://randomfox.ca/floof';

// obtenemos la app
const appNode = document.querySelector('#app');

Convertimos los datos a formato json

// función para consultar api
async function fetchData(urlAPI) {
    const response = await fetch(urlAPI);
    const data = await response.json();
    return data;
}

Creamos el template de las imagenes y lo agregamos al DOM

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);
}

Creamos el boton y le asignamos su evento

// 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 🦊

Edgar Gomez

student•

saludos, interesante, gracias por compartir

Kevin Ramirez

student•

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)

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);```

//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);

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);

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 => { &#x20;

&#x20;   const imagecontainer = document.createElement('div');
&#x20;   imagecontainer.className = 'p-4';

&#x20;   const image = document.createElement('img');
&#x20;   image.className = 'mx-auto';
&#x20;   image.width = '320';
&#x20;   image.src = data.image;

&#x20;   imagecontainer.appendChild(image);
&#x20;   card.append(imagecontainer);
&#x20;  &#x20;
});
addButton.addEventListener('click', newImage);

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)

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();

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)

Creando las imagenes con JavaScript

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones