Ejercicios prácticos de HTML, CSS y JS para entrevistas técnicas
Clase 10 de 22 • Curso para Conseguir Trabajo como Frontend Developer
Contenido del curso
Clase 10 de 22 • Curso para Conseguir Trabajo como Frontend Developer
Contenido del curso
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
Luis Alejandro Vera Hernandez
JUAN CAMILO CAMPO TANGARIFE
Felix Torres Javier Antonio
Joel Dominguez Merino
Camila Silva Bernal
Felix Torres Javier Antonio
Orangel Brito
Dario Fernando Burbano Hernandez
Juan Omar Palma álvarez
Alejandro Chavez
Francisco Ponce
Alejandro Chavez
Felix Torres Javier Antonio
Ricardo Rito Anguiano
Felix Torres Javier Antonio
Alfonso Neil Jiménez Casallas
Juan Camilo Zuniga
Angel Bernechea
Edmundo Salamanca Villa
Pablo Pincay Alvarez
Alejandro Chavez
fabian ortega
Felix Torres Javier Antonio
Felix Torres Javier Antonio
Orangel Brito
Felix Torres Javier Antonio
JUAN CAMILO CAMPO TANGARIFE
Esteban Vladimir Alvarenga Gutiérrez
Felix Torres Javier Antonio
Wow, 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