- Tenemos una carpeta por cada proyecto
- Cada proyecto ya tiene armado su
HTML
yCSS
- Solamente debemos de codear en los archivos
app.js
- Tenemos una guía más abajo por cada proyecto
- Por cada paso de los proyectos vamos a hacer una introducción a cada tema
- Strings, arrays y objetos
- Como definir e invocar funciones
- Como usar forEach para recorrer un array
- Definir componentes re-utilizables usando Template strings
- Como manipular el DOM usando querySelector, classList e innerHTML
- Como definir constantes usando const y variables usando let
- Como utilizar fetch junto con async/await para obtener datos de una API
-
Conceptos
const
document.querySelector
element.addEventListener
- Pasos a seguir
- Definimos una constante
mainButton
y le asignamos el valor de obtener el elemento usandodocument.querySelector
pasandole como paramétro'.zip-code'
- A la constante definida podemos invocarle un método llamado
addEventListener
y como primer parámetro le pasamos'click'
y como segundo parámetrogetPostalCode
(que es una función que todavía no tenemos definida)
- Definimos una constante
-
Conceptos
async/await
classList
try / catch / finally
Template strings
- Pasos a seguir
- Definimos una función
async
llamadagetPostalCode
que va a recibir como argumentoevent
el cuál es toda la información del evento que acaba de suceder, en este caso el click. - Definimos una constante llamada
button
y le asignamosevent.target
el cuál es la referencia al elemento que ejecutó el evento, en este caso el boton. - Ahora antes de ejecutar alguna función asincrónica queremos mostrar un spinner para ello solamente debemos agregar una clase en el boton, invocando un método en la constante
button
llamadoclassList.add
y pasandole como parámetro'is-loading'
- Algunas veces nuestro código puede tener algún error para que el error no haga que el usuario no pueda seguir usando el sitio vamos a definir el siguiente código:
try { ... } catch (error) { ... } finally { ... }
- Dentro del
try
vamos a definir una constanteposition
que le vamos a asignar el valor de invocargetPosition
(ya definida) anteponiendo la palabraawait
. Para probar que funciona podés hacer unconsole.log(position)
- Ahora que ya tenemos definido
position
debemos obtener el código postal. Para ello definimos una constantepostalCode
y le asignamos el valor de invocar afetchPostalCode
(ya definida) pasandole como parámetroposition
y anteponiendo la palabraawait
. Para probar que funciona podés hacer unconsole.log(postalCode)
- Antes de salir del
try
invocamos a la funciónnotifySucess
(ya definida) pasandole como parámetro un template string que digam'Tu código postal es C1414'
que contenga la constantepostalCode
al final. - Entrando al
catch
vamos a ejecutar la funciónnotifyWarning
(ya definida) pasandole como parámetroerror.message
- Entrando al
finally
vamos a eliminar el spinner tanto si hubo un error o no, invocando a almainButton
el métodoclassList.remove
pasándole como parámetro'is-loading'
- Definimos una función
-
Conceptos
const
function
Template strings
document.title
document.querySelector
- Pasos a seguir
- Definir una función
setTitles
- Dentro de la misma definir una constante
currentYear
y debemos asignarle el resultado de invocar la funcióngetCurrentYear
- Definir una constante
title
y asignarle un template string para que diga "Feriados 2018", interpolando la constantecurrentYear
- Al titulo de la pestaña le asignaremos la constante
title
- Obtendremos el elemento
h1
y le asignaremos la constantetitle
- Definir una función
Solo a modo de prueba podes ejecutar y eliminarla después
setTitles()
- Conceptos
function
(argumentos y return)Template strings
(saltos de línea)
- Pasos a seguir
- Definir una función
createCardComponent
- Debe recibir
title
,date
ytype
- Debe devolver un template string con el siguiente contenido:
- Definir una función
<div class="card">
<div class="card-header">
<div class="card-title">${title}</div>
</div>
<div class="card-body">
<div class="card-date">${date}</div>
<div class="card-type">${type}</div>
</div>
</div>
Solo a modo de prueba podes ejecutar la siguientes lineas y eliminarla después
const grid = document.querySelector('.grid')
grid.innerHTML = createCardComponent('hola mundo', 'DevDay', 'JS101')
-
Conceptos
fetch
async/await
-
Pasos a seguir
-
Definir una función async llamada
fetchHolidays
-
Dentro de la misma definir una constante
currentYear
y asignarle el resultado degetCurrentYear()
-
Definir una constante
apiEndpoint
y asignarle un template string que contenga al final la variablecurrentYear
, por ejemplo:https://nolaborables.com.ar/api/v2/feriados/${currentYear}
-
Definir una constante
response
y asignarle el resultado de fetch anteponiendoawait
, y pasandole como parámetroapiEndpoint
-
Definir una constante
holidays
y asignarle el resultado de ejecutarresponse.json()
anteponiendoawait
-
Devolver la constante
holidays
usandoreturn
-
Solo a modo de prueba podes ejecutar las siguientes lineas y eliminarla después
async function demo() {
const holidays = await fecthHolidays()
console.log('Los feriados son: ', holidays)
}
demo()
-
Conceptos
forEach
innerHTML
- Pasos a seguir
- Definir una función async llamada
main
- Ejecutar nuestra funcioón
setTitles
- Definir una constante
grid
y asignarle el valor de obtener el elemento con clasegrid
usandoquerySelector
- Definir una constante
holidays
y asignarle el valor del resultado de llamarfetchHolidays
anteponiendoawait
- Iterar
holidays
usando el métodoforEach
y pasandole como parámetro una función que recibe como argumentoholiday
- Dentro de la misma definir una constante
currentYear
y asignarle el resultado degetCurrentYear()
- Definir la constante
formattedDate
y asignarle el resultado degetFormattedDate()
pasandole como parámetrosholiday.dia
,holiday.mes
ycurrentYear
- Definir la constante
holidayCard
y asignarle el resultado decreateCardComponent
pasandole como parámetrosmotivo
,formattedDate
, yholiday.tipo
- Asignarle a
grid.innerHTML
usando+=
la constanteholidayCard
- Por último ejecutar nuestra función
main()
- Definir una función async llamada