Easley ejercicio extra

Ejercicios de fin de semana

Pautas
Ejercicios

Pautas

Clona el repo.
Crea una rama con tu nombre (por ejemplo, carlos-mananas).
Ve haciendo los ejercicios en tu rama, cada uno en su propio commit. Esto es: Hago un ejercicio, hago un commit, siguiente ejercicio.
Disfruta la fruta.

Ejercicios

1/ Listado de noticias

Hay que pintar en el html un listado a partir del array que tenemos en el js. En index.html hay un ejemplo de como debe quedar cada li, con sus clases y tal para que nadie se pierda en estilos o en algo que no sea js.

2/ Marte, el planeta rojo

Una vez tenemos nuestra lista de noticias vamos a destacar los resultados "marcianos" aplicando la clase .news__item--from-mars.

Aplicaremos esta clase a los <li> cuyo título contenga “Mars” o “Martian”, para ello:

Buscaremos todos los elementos con clase .news__item.
Recorreremos la lista de elementos almacenando en una variable el contenido del título de cada elemento.
Usando el método includes() comprobaremos si contienen “Mars” o “Martian” y aplicaremos al li correspondiente la clase .news__item--from-mars
Tadaaa!!

En el archivo css/main.css habrá que añadir estas clases:

.news__item--from-mars {
  border-color: #bc2731;
  box-shadow: 0 1px 4px rgba(188, 39, 49, 0.6);
}
.news__item--from-mars .news__title {
  color: #bc2731;
}
.news__item--from-mars .news__image {
  box-shadow: 0 0 0 3px rgba(188, 39, 49, 0.8);
  border-radius: 5px;
}

3/ En el espacio nadie puede oir tus fetchs

Todo el mundo sabe que en el espacio la comunicación es remota, así que vamos a pedir las noticias a casa. Para ello nos han dado la siguiente url: http://beta.adalab.es/Easley-ejercicios-de-fin-de-semana/data/news.json

Tendremos que comentar el array de news que teníamos en main.js y volver a pintar nuestras noticias, pero esta vez las recibidas tras hacer la petición a nuestra API de noticias de casa.

4/ Ahora me ves...

Vamos a añadir una pequeña funcionalidad a nuestro listado de noticias: por defecto no se van a ver las imágenes, pero al hacer click haremos que sean visibles o vuelvan a ser invisibles... y todo cambiando 1 sola clase que aplicaremos al contenedor general de cada noticia, el <li />.

Recapitulando:

Por defecto todos los <li /> tendrán una clase extra: news__item--no-image-visible que hará que la imagen del <li /> no se vea
Al hacer click en cada noticia la quitaremos si ya la tenía o la pondremos si no la tenía de manera que al hacer click aparecerá o desaparecerá la imagen.

Podéis usar estos estilos:

.news__item--no-image-visible .news__image {
  display: none;
}

5/ Todo es color entre tú y tus arrays...

Vamos a cambiar de tercio radicalmente y sacar a la diseñadora que llevamos dentro: vamos a pintar paletas que podríamos usar en diferentes páginas web, y como somos unas freaks pues a cada paleta le ponemos nombres de naves espaciales de películas, a lo loco.

Esta vez tenemos una URL http://beta.adalab.es/Easley-ejercicios-de-fin-de-semana/data/palette.json que nos devuelve datos de una paleta y tenemos que pintarla como en el ejemplo:

Pero hay uno requisito:

Podemos crear los estilos que estimemos oportunos pero el color de la paleta lo añadiremos con un atributo style="" en cada cuadrado, es decir, si cada cuadrado fuese un div podría quedar algo así:

<div class="color__item" style="background-color:#ffcc00"></div>

De esta manera aplicaremos el color a cada cuadrado.

6/ Episodio VI: El retorno de las paletas

Ahora que sabemos pintar una paleta vamos a ver las paletas de las mejores naves de ciencia ficción, en esta URL https://beta.adalab.es/Easley-ejercicios-de-fin-de-semana/data/palettes.json tenemos a las mejores: ¡¡¡Píntalas todas!!

7/ Mis paletas preferidas

Una vez las tengas todas pintadas vamos a permitir que la usuaria seleccione sus paletas preferidas. Al hacer clic en cualquiera de ellas tenemos que añadirle alguna clase que la marque como seleccionada. Como hay mucha gente a la que le cuesta decidir dejaremos que marquen como preferidas tantas paletas como quieran.

8/ Buceando entre naves

Ahora vamos a dejar que la usuaria filtre por nombre de nave, para ello tenemos que añadir una caja de búsqueda. Cada vez que se escriba una letra filtraremos. Si la usuaria escribe 'a' solo pintaremos las naves cuyo nombre contengan 'a', si escribe 'ac' as que contengan 'ac'. Y así!

9/ ¡Caches a mi!

Estamos haciendo muchas peticiones al servidor cada vez que alguien visita la web. Y hemos visto que muchas veces es una usuaria que ya la visitó antes. Vamos a cachear la respuesta de nuestro fetch en localStorage. La idea es que al cargar la página podamos consultar el LS, si ya están las paletas guardadas las pintamos directamente y nos ahorramos una petición. Sino hacemos nuestro fetch ;)

Crismmgg/repaso_mod2_js