- 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 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
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