Contenido del curso
Ejercicios prácticos de HTML, CSS y JS para entrevistas técnicas
3 ejercicios para poner en práctica tus habilidades en HTML, CSS y JS. Módulo: Prepárate para presentar entrevistas técnicas.
Para finalizar nuestro módulo, te compartiré 3 ejercicios para que pongas en práctica tus conocimientos en HTML, CSS y JS.
Buscador de GIF
Esta página debe contener una barra de búsqueda y una grid principal (con 3 columnas en desktop, 2 en tablet y 1 en mobile) que muestre GIF aleatorios. Una vez se digite 3 letras en la barra de búsqueda, se empiezan a mostrar GIF relacionados con la búsqueda en la grid principal.
Para este ejercicio, usa la API de GIPHY. Puedes tomar este diseño como referencia:
TODO List de emojis
Esta página debe contener una barra de búsqueda que recibirá como entrada las actividades de tu rutina diaria como: “comer”, “correr”, “pasear mascota”, “dormir”, entre otras; y un botón de “agregar” que se encargará de mostrar debajo de la barra de búsqueda un emoji correspondiente a la actividad ingresada.
Si se ingresa más de una actividad, deben mostrarse en forma de lista.
Adicionalmente, otra de las funciones de este TODO es que al darle clic al emoji (actividad), éste se debe remover de la lista. Puedes tomar este diseño como referencia:
Listado de música
Esta página debe mostrar las canciones de uno de los álbumes de tu artista favorito.
Adicional, deben existir 2 botones para cambiar el diseño de las canciones mostradas, ya sea para verlas en cuadrícula o en lista. Puedes tomar este diseño como referencia:
¡Espero tus soluciones en la sección de comentarios!
christian rojas
Estudiante
Luis Alejandro Vera Hernandez
Estudiante
JUAN CAMILO CAMPO TANGARIFE
Estudiante
Felix Torres Javier Antonio
Estudiante
Joel Dominguez Merino
Estudiante
Camila Silva Bernal
EstudianteFelix Torres Javier Antonio
Estudiante
Orangel Brito
Estudiante
Dario Fernando Burbano Hernandez
Estudiante
Juan Omar Palma álvarez
Estudiante
Alejandro Chavez
Estudiante
Francisco Ponce
EstudianteAlejandro Chavez
EstudianteFelix Torres Javier Antonio
Estudiante
Ricardo Rito Anguiano
EstudianteFelix Torres Javier Antonio
Estudiante
Alfonso Neil Jiménez Casallas
Estudiante
Juan Camilo Zuniga
Estudiante
Angel Bernechea
Estudiante
Edmundo Salamanca Villa
Estudiante
Pablo Pincay Alvarez
EstudianteAlejandro Chavez
Estudiante
fabian ortega
EstudianteFelix Torres Javier Antonio
EstudianteFelix Torres Javier Antonio
EstudianteOrangel Brito
EstudianteFelix Torres Javier Antonio
EstudianteJUAN CAMILO CAMPO TANGARIFE
Estudiante
Esteban Vladimir Alvarenga Gutiérrez
EstudianteFelix Torres Javier Antonio
EstudianteWow, con estos ejercicios propuestos me doy cuenta que me falta mucho por conocer de JavaScript para poder encontrar las soluciones. Espero pronto terminar la escuela de JavaScript y volver a esta clase para dar mis soluciones.
Éxitos a todos en sus carreras
x2
Así me quedó el ejercicio de los Giffs que me pareció divertido.
.
te quedó chilo
Excelente ejercicios para poder en practica los conocimientos que vamos adquiriendo. En mi caso me pondre las pilas con Javascript ya que es lo que aún me falta pero espero pronto poder compartir mis soluciones 🚀
Esta es mi app de todo list
Aquí mi último reto, me faltan cosas que mejorar, pero para el reto creo que es suficiente.
link: https://musicapp-4a349.web.app/
Para el buscador de gif ¿Como hacer para que se muestren las imagenes una vez que se dijite 3 letras?
hola, alguien sabe como incluir un archivo template en nodejs estoy tratando de searar la cabecera y el footer de las demas vistas para reutilizar el código
Algien me puede ayudar?
¿Será mucho hacerlos con Next.js?
A mi parecer no, pero sería muy cool si pudieras justificar con alguna feature del porqué elegir Next y no React / JS Vanilla y DOM.
Entiendo FranciscoEP, ayer decidí usar JS Vanilla y DOM por la simplicidad y porque no tengo projects con Vanilla.
Maestra, @Estefany Aguilar, no entendí bien, como debe de funcionar el To-Do List, podría poner mas detalle?
Hola Javi! En platzi hay un curso donde realizamos un To-Do List paso a paso. Que además es buenisimo para los fundamentos en react https://platzi.com/cursos/react/
Suerte!
Hola Ricardo, la cuestión es que no entendí el funcionamiento del TODO List de emojis que indica la maestra.
esto no entendo: y un botón de “agregar” que se encargará de mostrar debajo de la barra de búsqueda un emoji correspondiente a la actividad ingresada.
si alguien me diera mas detalle estaría genial, pro mientras haré el TODO List básico
jajajajaja, muy chistosos esos memes de GIPHY XD
amigos llevo un rato intentando hacer la peticion a la API y cuando quiero imprimir la propiedad data de la respuesta me sale bien, pero recargo la pagina y dice que "data" no esta definido y no cambie nada del codigoimport GiftSearch from '../GiftSearch'import GiftResults from '../GiftResults'import GiftBox from '../GiftBox';import './App.css'; import {useState, useEffect, React} from 'react' const ApiUrl = 'https://api.giphy.com/v1/gifs/search?api\_key=6UYRQXhmyZrtow0dv1DhfyT7Sy3VwR4e\&q=trend\&limit=25\&offset=0\&rating=g\&lang=en\&bundle=messaging\_non\_clips'
function App() { const [gifts, setGift] =useState(null) useEffect(() => { fetch(ApiUrl) .then(response => response.json()) .then(res => setGift(res)) }, []) const results = gifts return ( <> <GiftSearch /> <GiftResults> { console.log(results.data) } </GiftResults> </> );}
export default App;
import GiftSearch from '../GiftSearch' import GiftResults from '../GiftResults' import GiftBox from '../GiftBox'; import './App.css'; import {useState, useEffect, React} from 'react' const ApiUrl = 'https://api.giphy.com/v1/gifs/search?api_key=6UYRQXhmyZrtow0dv1DhfyT7Sy3VwR4e&q=trend&limit=25&offset=0&rating=g&lang=en&bundle=messaging_non_clips' function App() { const [gifts, setGift] =useState(null) useEffect(() => { fetch(ApiUrl) .then(response => response.json()) .then(res => setGift(res)) }, []) const results = gifts return ( <> <GiftSearch /> <GiftResults> { console.log(results.data) } </GiftResults> </> ); } export default App;
aqui esta el Todo-List que ya habia hecho unas clases anteriores le segui haciendo algunas modificaciones para darle un toque mas de personalidad
La app de Gifs
Esta app la hice de otro curso, la tengo que mejorar y a su vez hacer los demas que se ven muy interezantes.
Gifs: Link
Abierto a recibir feedback, ambos tienen simple responsive:
hola comunidad de Platzi, terminare los cursos de JS y volvere a este contenido para tratar de resolver los ejercicios.
dejo este comentario, como recordatorio
ya tengo el de los gif, ahí humildemente!
Quedo chido, solo que en desktop deberia ser de 3 columnas!
Tienes razón
Dejaré mi comentari por aquí, terminaré el curso y realizaré el proyecto.
Dejaré mi comentario acá. Continuaré otros cursos que tengo pendientes y si o si volveré y con los ejercicios resueltos y a compartirlos. ¡¡Ánimos a todos!!
. dejo este comentario, como recordatorio
