Cursos Empresas Blog Live Conf Eventos Precios

0:0017:33

Creando las imagenes con JavaScript

Curso de Manipulación del DOM

Clase 22 / 29

Ver clases

Creando las imagenes con JavaScript

Curso de Manipulación del DOM

Clase 22 de 29

Clase 22 / 29

Creando las imagenes con JavaScript

Curso de Manipulación del DOM

Clase 22 / 29

Ver clases

Kevin Isaí Santiago López

Hace 4 años

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

Hace 4 años

saludos, interesante, gracias por compartir

Comentarios (111)111 comentarios

fermin martin

Hace 6 años

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

Jimmy Buriticá Londoño

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

Es un gran profesor 💥

Diego Grueso

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

que dato tan interesante bro

Fredy A. Yomayuza Colorado

y como se utiliza ese dato..?

Yomar Gutierrez 

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

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

Hace 5 años

Realizado con ASYNC/AWAIT

Carlos Eduardo Gomez García

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

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

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

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

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

Seba Cardoso

Los genios son humanos tambien jaja/

Brayan Ramirez Alzate

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

Wilmion Navarrete

En la funcion random se puede simplificar asi

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

Edgar Lopez Arroyo

Muy buena, tu decides que limite tiene 👍

José Rodolfo Figueroa Chávez

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

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.

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

Juan Esteban Galvis

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

Me da este error:![](

Jonathan 🦑 Alvarez

Profesor

Hola @IndhiraTejada!

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

Gracias, Profe, lo chequearé.

Jean Bustamante

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

Hace 3 años

Wilker Vivas

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 Ramirez

Creando las imagenes con JavaScript

Creando las imagenes con JavaScript

Creando las imagenes con JavaScript

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones

Creando las imagenes con JavaScript

Creando las imagenes con JavaScript

Comentarios

Problemas tipicos en despliegue o consumos de APIS

Como lo solucionas ?

Comentarios

Problemas tipicos en despliegue o consumos de APIS

Como lo solucionas ?