# Pain Points

## W01D01

- Pair: [lab-css-recipees](https://github.com/ironhack-labs/lab-css-instagram-clone)
- Daily: [lab-css-instagram-clone](https://github.com/ironhack-labs/lab-css-instagram-clone)

#### Comentar en el día:

--CUESTIONES PREVIAS---------------------------------
Todo el mundo tiene git, oh my zsh, cuenta de github?
-----------------------------------------------------

1. Que nos envíen la cuenta de github (si no la tienen, que la creen)
2. Qué es pair programming y qué no es
3. Cómo hacer un clone, un git add, git commit y git push
4. Los labs: Fork
5. Entregar: Daily y Pair
6. Empezar por el pair, 2h - 2h30 máximo
7. Continuar con Daily hasta morir
8. Importancia de leer los labs ENTEROS
9. Visitar las learnings (ctrl f para buscar en la web)
10. Recipes Pair
11. Instagram Clone Daily
12. Trabajar siempre dentro de la carpeta starter-code
13. Comentar lo de pensar la estructura del html antes de picar (Pensar en cajitas)
14. Siempre el código en ingles
15. En css, utilizamos los guiones bajos (lodash) _ y guion medio - (slash)
16. DUDAS? GOOGLE/STACKOVERFLOW
17. +DUDAS? Tus compis
18. ATASCAD@ ? Estamos aquí para ayudar

## W01D02

- Pair: [spotify-clone](https://github.com/ironhack-labs/lab-css-spotify-clone)

- Replicar la web de Spotify, tienen un pdf con la versión completa de la web, además el repo viene con el texto, la estructura básica del html y los colores en la hoja de estilos que ya viene creada también, solo tienen que enlazarla.
- En las instrucciones hace referencia a la importancia de dividir la web en partes para que luego resulte más fácil crear la estructura html y da un ejemplo de como hacerlo.
- Tenemos 4 secciones , un header, dividido a su vez en una navbar y un logo, luego tendríamos otra sección que podría ser el hero, a continuación tendríamos otra sección con varios articles, con sus iconos, etc y otra ultima que es la que tiene un poco de truco, se ve que está dividida en dos partes y tiene un icono en el centro que si nos fijamos bien no está totalmente alineado, esta es la parte que tiene un poco de labor de investigación...Está pensado para hacerlo con `floats` (y alguna referencia hay en las instrucciones).
- Hay que indicar que debe hacerse con `flexbox`.
- Quien le de tiempo y se anime, puede añadirle una animación al logo de Spotify, cuando hagas over sobre el logo, o al cargar la página, etc

- Daily: [cloning-revera](https://github.com/ironhack-labs/lab-bootstrap-cloning-revera)

- El individual es también clonar otra web pero usando bootstrap.
- El objetivo principal del ejercicio es que se peleen con el sistema de grid de bootstrap, que se basa en una división de contenedores, filas y columnas, las filas se pueden dividir en un máximo de 12 columnas y con eso deben jugar para intentar darle un aspecto lo más parecido posible a la web del ejercicio.
- El Carrousel no es relevante, dejarlo para el final para quien le de tiempo, si no dejas una imagen fija y ya, lo importante es que intenten crear la estructura usando bootstrap.
- Los iconos son de FontAwesome.
`<script src="https://kit.fontawesome.com/da911c0b80.js" - crossorigin="anonymous"></script>`

- Seguir haciendo incapié en los puntos comentados el primer día a la hora de abordar los ejercicios y la forma de trabajar. ES MÁS IMPORTANTE ENTENDER EL CODIGO QUE SE PICA, QUE ENTREGAR EL EJERCICIO RESUELTO COPIADO DE OTRO COMPAÑERO

#### Extra:

- Si da tiempo, hacer con los alumnos el `froggy` para practicar `flexbox`

- [Froggy](http://flexboxfroggy.com/#es)

## W01D03

- Daily: [Slack Clon](https://github.com/ironhack-labs/lab-css-flexbox-slack)

- Confirmar antes de explicar el ejercicio si se hace con Bootstrap o no:
- Con bootstrap los alumnos deben modificar la estrucutura html que viene en el lab para poder encajar el sistema de grid.
- Sin bootstrap no es necesario, sólo añadir clases y tocar el css. Aunque si los alumnos quieren se pueden añadir más cajas para controlar.

- La mejor forma de abordar el ejercicio es `mobile first`, hacer primero la sección en movil y después cada sección en los diferentes dispositivos. Ir sección a sección, de movil a desktop para seguir avanzando.
- Los bordes de los clientes son tricky, pero se puede hacer.
- Es importante establecer los breaking points desde el principio:

    Todo lo que no va en los @media 
    son los estilos móviles, esta es 
    la aproximación correcta mobile first
    
     // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

- La estructura html viene dada, pero se pueden añadir clases propias para luego usarlas en el css.

## W01D04

- Pair: [javascript-basic-algorithms](https://github.com/ironhack-labs/lab-javascript-basic-algorithms)

- Este ejercicio es un repaso de los conceptos básicos de JS que ya hemos visto en el prework como variables, condicionales, loops, etc y algunas cosas nuevas vistas en clase como métodos de manipulación de arrays, strings, etc
- Vamos a usar el editor de código online repl.it para probar el código y cuando haga lo que cada iteración nos pide , debemos pegar este en la parte que corresponda del `index.js` que viene dentro de la carpeta `/js` del repo. Importante que cada uno se registre para no tener sustos si se borra el archivo etc.
- Es bastante asequible y quien vaya bien de tiempo puede intentar los bonus tranquilamente.

- Daily 1: [javascript-functions-and-arrays](https://github.com/ironhack-labs/lab-javascript-functions-and-arrays)

- El objetivo de este ejercicio es que se familiaricen con la manipulación de arrays y la declaración e invocación de funciones mediante pequeñas katas o ejercicios, y comprobando que está ok con la librería de testing Jasmine.
- Jasmine es una libreria para Javascript para crear test unitarios, de momento con que sepan esto es suficiente porque los test nos vienen ya creados y lo importante es que sepan como utilizar la libreria para comprobar su código.
- El modo de abordar este ejercicio sería primero e importante, leer bien que se nos pide en cada iteración, luego nos abrimos el archivo SpecRunner.html e iremos actualizandolo a medida que vayamos escribiendo nuestro código, ahí se nos mostrará el estado de los test, cuando este verde es que esta OK y pasaríamos a la siguiente iteración. El código debemos escribirlo dentro de la carpeta SRC, en el archivo .js, debajo de cada iterción correspondiente.
- Los bonus son abordables excepto el último!!!

- Daily 2: [javascript-clue](https://github.com/ironhack-labs/lab-javascript-clue)

- En este ejercicio se nos pide que creemos la lógica del juego de mesa Cluedo con Javascript.
- La forma de encararlo es similar a la del anterior, vamos a usar de nuevo la librería Jasmine para ir comprobando si lo que se nos pide en cada iteración y el código que escribimos es el correcto.
- Vamos a escribir el código en el archivo `clue.js` dentro del directorio `/src` y vamos a tener abierto e ir refrescando cada vez que queramos comprobar el código el archivo `SpecRunner.html` que se encuentra dentro de `starter-code`.
- En la primera iteración se nos pide que creemos un array de objetos con una estructura que se nos indica, que simulará las cartas del juego. En la iteración 2 nos piden que creemos varias funciones, una funcion `selectRandom` que devuelva una carta al azar, otra función `pickMystery` que nos devolverá un objeto con 3 propiedades, sospechoso, arma y habitación.
- La última iteración consiste en crear una función llamada `revealMystery` que devuelve un mensaje revelando el misterio.

#### IMPORTANTE:
- Hacer referencia a que el archivo `SpecRunner.html` puede darnos pistas, pero no hay que guiarse al 100% en este, hay que leer y entender bien el readme para saber que se nos está pidiendo.
- No modificar el archivo de los test de Jasmine.

## W01D05

- Pair: [lab-javascript-vikings](https://github.com/ironhack-labs/lab-javascript-vikings)
- Ejercicio para el manejo de clases y profundizar en el funcionamiento de Jasmine. Abrir vscode y explicar como funcionan las specs y qué es lo que hace exactamente un test.
- El lab está bien explicado y es cuestión de seguirlo al pie de la letra y asegurarse de crear todas los métodos y clases tal cual vienen en Jasmine para evitar atascos.
- Hacer el bonus es totalmente viable.

- Daily: [lab-dom-ironhack-cart](https://github.com/ironhack-labs/lab-dom-ironhack-cart)
- Tienen el fin de semana para hacerlo entero.
- Lab para dominar el manejo del DOM.
- Explicar cómo aproximarse por pasos a cada función. Sobre todo en el caso de los event listener comprobar con un `alert` o `console.log` que el evento está bien capturado.
- Tener en cuenta si es necesario o no pasarle el selector css según la función que se invoca:
- `querySelector('.clase')` lo lleva porque es un selector global
- `domEl.classList.toggle('class')` no lo lleva porque va implícito en el método de classList.

## W02D01

- Daily: [javascript-greatest-movies](https://github.com/ironhack-labs/lab-javascript-greatest-movies)

- El objetivo del ejercicio es familiarizarse con la manipulación de colecciones o arrays de objetos mediante la utilización de los distintos métodos que hemos estado estudiando los anteriores días.
- Trabajaremos sobre un array de objetos compuesto por 250 películas, cada película es un objeto del array con sus propiedades, titulo, director, año, etc.
- Vamos a ir leyendo detenidamente lo que nos pide cada iteración, escribiendo nuestro código en el archivo `src/movies.js` y comprobando de nuevo el `SpecRunner.html` de Jasmine.
- Solución para las horas y minutos:

        function turnHoursToMinutes(array) {
 
       let copy = [...array]
 
       let duration = copy.map(elm => {
       const copyElm = {
           ...elm
       }
 
       if (elm.duration.includes("h") &&         elm.duration.includes("min")) {
           copyElm.duration = parseInt(elm.duration.substr(0, 1)) * 60 + parseInt(elm.duration.substr(3, 5))
           return copyElm
       } else if (elm.duration.includes("h")) {
           copyElm.duration = parseInt(elm.duration.substr(0, 1)) * 60
           return copyElm
       } else if (elm.duration.includes("min")) {
           copyElm.duration = parseInt(elm.duration.substr(-5, 2))
           return copyElm
 
       }
       });
 
       return duration
        }

### IMPORTANTE
- Centrarse en resolver test a test de Jasmine, leyendo cuidadosamente lo que nos pide!

## W02D02

- Hoy los TA normalmente impraten estas dos clases:
- Clase de debugging - http://learn.ironhack.com/#/learning_unit/6408
- Clase de testing - http://learn.ironhack.com/#/learning_unit/6428

- Pair: [chronometer](https://github.com/ironhack-labs/lab-javascript-chronometer)
- Hay que decirles que para conseguir que funcionen los milisegundos es posible que fallen tests que funcionaban.

- Daily: [memory-game](https://github.com/ironhack-labs/lab-javascript-memory-game)
- Hay que enlazar los archivos `css` y `js` en el `index.html`. Ojo con el orden de enlazado de los arhivos!
- Para el shuffle de cartas deben hacer investigación según el readme, normalmente lo encuentran sin problema.
- Leer bien el readme es clave porque da pistas importantes como que el array de pickedCards no debe tener nunca más de 2 cartas y lo de comprobar con isFinished() si están todas las cartas giradas.

## W02D03

- Pair: [koans](https://github.com/ironhack-labs/lab-javascript-koans)
- El objetivo del ejercicio es que los alumnos entiendan el funcionamiento interno de un framework de testing, en este caso Jasmine que es con el que venimos trabajando durante el curso.
- En el readme se explica detalladamente una serie de métodos propios de Jasmine que es útil que se los lean para que entiendan mejor el funcionamiento y les va a venir bien a la hora de abordar el ejercicio. Como el método describe, it, expected, etc.
- Vamos a trabajar en el archivo `koans.js`, dentro del directorio `/spec`, abrimos `SpecRunner.html` y veremos que todos los test están en verde, tendremos que ir descomentando el código y resolviendo test a test.

- Daily: [Advanced Algorithms](https://github.com/ironhack-labs/lab-javascript-advanced-algorithms)
- Explicar la diferencia entre pila y cola.
- Advertirles de que no pierdan la cabeza haciendo manipulación del DOM para insertar los elementos. Que harcodeen el diseño de las cajas en el HTML.

    domEl.innerHTML += `
    <div>
    Todo lo que sea necesario y par alos valores ${variable} utilizar EM6
    </div>
    `

- Está bien explicarlo con un esquema en la pizarra con ejemplos tipo la cola de una discoteca y una pila de pizzas, coméntando los métodos necesarios para los arrays:

    //STACK
    //para insertar ---> array.push()
    //para eliminar ---> array.pop()
    
    //QUEUE
    //para insertar ---> array.push()
    //para eliminar ---> array.shift()

### IMPORTANTE
- Esto es un comentario importante del día o algún evento o lo que surja.

## W02D04

- Daily: [canvas-race](https://github.com/ironhack-labs/lab-canvas-race-car)
- Vamos a realizar nuestro primer juego con Canvas aplicando los conceptos que hemos visto durante la clase de esta mañana.
- El ejercicio nos tiene preparado ya el elemento canvas en el archivo `index.html` con el id `canvas`.
- Nosotros vamos a trabajar todo el tiempo sobre el archivo `/js/index.js`, el cual nos viene preparado con un evento onClick para iniciar la función del comenzar el juego `startGame`.
- Seguir paso a paso el readme, leyendo cada iteración del ejercicio detenidamente.
- En la iteración 1 se nos pide que hagamos el tablero del juego (la carretera), que para eso usaremos el método context (ctx) de canvas. Hay que tener en cuenta que primero hay que inicializar el elemento canvas.
- En la iteración 2, pintaremos el coche, que es una imagen que ya nos viene dada con el repo.
- En la iteración 3, haremos que el coche se mueva de izquierda a derecha, para esto necesitaremos algún tipo de evento para cuando pulsemos una tecla(onKeyDown)
- En las siguientes iteraciones pues nos pide que creemos obstaculos que se mueven y por ultimo un score para cuando esquivemos un obstáculo.

### IMPORTANTE
- Cuidado, que cada vez que pulsemos startClick se rompe el setInterval.

## W02D05

- Los TAs imparten la clase sobre Github y Github Pages: http://learn.ironhack.com/#/learning_unit/6444
- Hoy es el día de showcase de proyectos pasados, para montar el showcase está este repo: [Repo de referencia](https://gomezortiz.github.io/iron_games/index.html)
- Los TAs comparten recursos para los juegos. Aquí la lista: https://pastebin.com/DYZsm8GV

## W03 - PROJECT 1

- SEMANA DE PROYECTO

## W04D01

- Pair: [es6-javascript-koans](https://github.com/ironhack-labs/lab-es6-javascript-koans)
- El procedimiento es igual que en el anterior ejercicio de koans.
- Abrimos el archivo `SpecRunner.hmtl` que está en la raíz del proyecto, veremos que todos los test están en verde porque se encuentran comentados.
- Trabajaremos sobre el archivo `/spec/koans.js`, leemos bien el metodo `describe` e `it` de cada test y vamos descomentando y/o escribiendo en el que se nos requiera para hacer que el test funcione.
- El ejercicio tiene dos partes, hacer solo la parte de `Pair Programming`

- Daily: [intro-node](https://github.com/ironhack-labs/lab-intro-node)
- Mocha es un framework de testeo para Javascript que funciona sobre Node.
- Para instalarlo, dentro de la carpeta `starter-code` lanzamos el comando `npm install mocha`, comprobamos que en el archivo`package.json` que se nos debe de haber creado que en el apartado `dependencies` aparece este.
- Para correr los test, debemos ejecutar el comando `npm test` dentro de la carpeta `starter-code`
- Trabajaremos sobre el archivo `index.js` que se encuentra en `starter-code`, en el cual vamos a crear una clase con su constructor correspondiente y una serie de métodos que realizaran diferentes tareas que se nos irán describiendo en cada iteración.

### IMPORTANTE
- Para la instalación de node usar este pastebin, contiene el proceso de instalación de la learning resumido. Si da problemas revisar el primer punto de la guía, Ironhack para gente de windows.

[NodeJS](https://pastebin.com/TyG2TTVg)

## W04D02

## W04D03

- Pair: [mongoose-recipes](https://github.com/ironhack-labs/lab-mongoose-recipes)
- En este ejercicio vamos a aprender como usar la librería Mongoose, que nos facilita mucho la vida a la hora de trabajar con base de datos para MongoDB.
- 1. Crearemos el modelo con los requisitos que se nos indican en el readme.
- 2. Crearemos una receta nueva, cumpliendo los requisitos que hemos definido antes en el esquema. La conexión con la base de datos ya viene hecha, así como el vaciado de la base de datos previo. Usaremos el metodo create de Mongoose.
- 3. Usando el metodo insertMany de mongoose y los datos del json que ya estan importados en el index.js, insertaremos todas las recetas en nuestra base de datos.
- 4. Actualizaremos una receta de la base de datos con el método findOneAndUpdate.
- 5. Con el metodo deleteOne, eliminaremos una receta de la base de datos.
- 6. Cerraremos la conexión de la base de datos.

- Daily: [ironbeers](https://github.com/ironhack-labs/lab-ironbeers)
- Vamos a crear una apliación usando express como servidor web al igual que en el ejercicio de ayer, pero para esta ocasión vamos a servirnos de una API externa para la info que vamos a mostrar, en este caso datos de muchos tipos de cervezas.
- 0. El ejercicio ya viene configurado con express, hbs y la api de las cervezas, solo hay que lanzar el comando `npm install` dentro del directorio `starter-code` y ya tenemos todo funcionando y nos renderiza la vista que viene creada en `views`.
- 1. Crear el navbar con las 3 rutas que vamos a tener. Centrarse de momento en la lógica y dejar el estilo para lo último.
- 2. Tenemos que crear la home page, que es la vista index.hbs, la cual tiene una imagen que nos trae ya el lab en el directorio `/public/images` y dos botones que nos llevarán a sus respectivas rutas.
- 3. Vamos a crear la vista de las cervezas y su ruta, y tenemos que usar un método de la api que nos devuelve los datos de 25 cervezas. Como estamos renderizando con HBS y lo que nos devuelve la petición a la API es un array, tenemos que hacer uso de los Helpers, en este caso #each para iterar sobre la info.
- 4. Es muy parecido a lo que hemos hecho en la anterior iteración, pero esta vez vamos a crear una vista para una cerveza random y usaremos otro método de la api que nos devuelve datos sobre una cerveza random.
- 5. Partials
- 6. Hacer que cada cerveza sea clickable y te lleve a una página con la información detallada
- 7. CSS

### IMPORTANTE
- Problema con el footer en **ironbeers** => no está fijado al borde inferior de la página, sino que simplemente es el final de la página sin más.

## W04D04

## W04D05

- Pair: [express-basic-auth](https://github.com/ironhack-labs/lab-express-basic-auth)
- Crearemos un sistema de autorización y autenticación basico.
- En la primera iteración vamos a crear el signup pero antes tenemos que crear porque no vienen el modelo de mongoose, las rutas y las vistas.
- En la segunda iteración crearemos el login, ruta y vista, y ademas añadiremos el paquete express-session para crear una sesión cuando el usuario se logee.
- En la tercera iteración vamos a crear una pagina principal y una página privada donde solo el usuario logeado pueda acceder (con gif).
- Los Bonus son por un lado, añadir validación de datos del formulario de login y signup, recordad que en la primera iteración donde creamos el modelo, el nombre de usuario debe ser unico y los campos no pueden estar vacíos. Y el segundo Bonus añadir un plugin para medir la fortaleza de la contraseña que hemos introducido.

- Daily: [mongoose-movies](https://github.com/ironhack-labs/lab-mongoose-movies)
- Vamos a crear el primer CRUD con express, vamos a poder crear, leer, actualizar y eliminar datos.
- Seguir el readme porque viene paso a paso todo lo que hay que hacer, modelo, seed, rutas y vistas.

### IMPORTANTE
- Mongoose Movies es probablemente el ejercicio más importante del modulo 2 porque se van a pasar la siguiente semana copiando la estructura en el resto de CRUDs.

- Recomendar que se use PUT y DELETE además de GET y POST.

- Se puede completar el pair siguiendo paso a paso lo que viene en la learning del día sobre basic-authorization.

## W05D01

## W05D02

- Pair: [financial-data-graphing](https://github.com/ironhack-labs/lab-financial-data-graphing)
- Vamos a crear una aplicación para ver un histórico del valor del bitcoin y vamos a representar esta información en una gráfica, para esto vamos a utilizar una API llamada CoinDesk que nos proporcionará los datos que necesitamos y luego ChartJS que es una librería para crear gráficas con canvas para representar los datos.
- En la primera iteración nos dicen que tenemos que instalar la librería axios para hacer la petición get a la API, para instalar axios pues tenemos que poner el script del cdn en el html, en este caso en nuestra vista index hbs, luego de esto tenemos que hacer la petición a la api y mostrar un console.log asegurandonos que nos trae la info correctamente.
- En la segunda iteración vamos a instalar el cdn para chartjs igual que hicimos para axios, luego crearemos el chart para la gráfica, es super recomendable seguir los pasos de la learning!! y hacer dos funciones, una que haga la petición axios cuando se carge el html y otra que represente la grafica.
-

- Daily: [coffee-and-books](https://github.com/ironhack-labs/lab-coffee-and-books)

### IMPORTANTE
- Coffee and Books: Explicar que la key de Google Maps pueden usar la de la learning o la que use Germán en su ejemplo (comprobar cuál funcione), pero que se aseguren de que no se suba a Github.

- Financial Graph: Use Math.min.apply and Math.max.apply to filter the array and get the min/max values. >>>> Decirles que esto lo hagan con el spread operator.

## W05D04

- Daily: [file-upload](https://github.com/ironhack-labs/lab-file-upload)
- Vamos a configurar un aplicación tipo tumblr, en la que vamos a poder publicar Posts con una foto y comentarios.
- En la primera iteración tenemos que adaptar el singup que ya nos traen preparado con passport para subir una foto de perfil, con lo cual vamos a tener que modificar el modelo y la vista de signup.
- En la segunda iteración tenemos que crear un sistema para crear post una vez que el usuario este logeado en la aplicacioón, necesitaremos crear un modelo para los posts como nos indica el readme. Los posts se podrán ver en la home incluso si no estamos logeados.
- En la tercera iteración tenemos que crear un sistema de comentarios para los posts que podremos ver cuando hagamos click en detalles del post, para ello tendremos que crear un subdocumento de mongoose con los campos que nos indica el readme, esta es la parte de investigación del lab, para los comentarios y también necesitaremos crear una ruta para crear los comentarios.

### IMPORTANTE
- La iteración 4 del deploy NO tienen que hacerla. Ya se enseñará el despliegue más adelante.
- Subdocumentos de mongoose:
https://zellwk.com/blog/mongoose-subdocuments/