script.js

const usuarios = [
  { id: 1, nombre: "Ana", edad: 25, rol: "developer" },
  { id: 2, nombre: "Luis", edad: 32, rol: "manager" },
  { id: 3, nombre: "Carla", edad: 22, rol: "developer" },
  { id: 4, nombre: "Miguel", edad: 40, rol: "designer" },
  { id: 5, nombre: "Lucía", edad: 28, rol: "developer" },
]

// Ejercicio 1: Bucles

// 1.1 Objetivo: Imprimir en consola solo los nombres de los usuarios usando bucle for clásico:

for (let i = 0; i < usuarios.length; i++) {
  console.log(usuarios[i].nombre)
}

// 1.2 Objetivo: Imprimir en consola solo la edad de los usuarios usando bucle for of:

for (const usuario of usuarios) {
  console.log(usuario.edad)
}

// 1.3 Objetivo: Imprimir en consola nombre y rol de los usuarios usando forEach()

usuarios.forEach((usuario, indice) => {
  console.log(
    `El usuario con índice ${indice} se llama ${usuario.nombre} y es ${usuario.rol}`
  )
})

// Ejercicio 2: filter, map y arrow functions

// 2.1 Objetivo: Crear un nuevo array developers que contenga solo a los usuarios cuyo rol sea developer.

const developers = usuarios.filter((usuario) => usuario.rol === "developer")
console.log("---ARRAY DE DEVELOPERS---")
console.log(developers)

// 2.2 Objetivo: Usando el array developers que acabamos de crear,
// genera un nuevo array nombresDevs que contenga solo los nombres de esos developers.

const nombresDevs = developers.map((dev) => dev.nombre)
console.log("---ARRAY DE NOMBRES---")
console.log(nombresDevs)

// Ejercicio 3: Destructuring y Spread Operator

// 3.1 Objetivo: Modifica el forEach del Ejercicio 1.3. Usa destructuring dentro de la función para extraer nombre y rol directamente.

console.log("--- forEach con destructuring ---")
usuarios.forEach(({ nombre, rol }) => {
  console.log(`${nombre} es ${rol}`)
})

console.log("--- for of con destructuring ---")
for (const { nombre, rol } of usuarios) {
  console.log(nombre, rol)
}

console.log("--- for con destructuring ---")
for (let i = 0; i < usuarios.length; i++) {
  const { nombre, rol } = usuarios[i]
  console.log(nombre, rol)
}

// 3.2 Objetivo: Crea un nuevo usuario nuevoUsuario.
// Luego, crea un array todosLosUsuarios que sea una copia del array usuarios original, pero con nuevoUsuario añadido al final

const nuevoUsuario = {
  id: 6,
  nombre: "David",
  edad: 35,
  rol: "developer",
}

const todosLosUsuarios = [...usuarios, nuevoUsuario]

// Ejercicio 4: DOM Básico

// Objetivo: Usa el array developers y el array nombresDevs. Pinta los nombres de los developers en la ul con id lista-devs.

const listaDevs = document.getElementById("lista-devs")
// const listaDevs = document.querySelector("#lista-devs")

listaDevs.innerHTML = ""

for (const nombre of nombresDevs) {
  const li = document.createElement("li")
  li.textContent = nombre
  listaDevs.appendChild(li)
}

// nombresDevs.forEach((nombre) => {
//   const li = document.createElement("li")
//   li.textContent = nombre
//   listaDevs.appendChild(li)
// })

// nombresDevs.map((nombre) => {
//   const li = document.createElement("li")
//   li.textContent = nombre
//   listaDevs.appendChild(li)
// })

// for (let i = 0; i < nombresDevs.length; i++) {
//   const nombre = nombresDevs[i]
//   const li = document.createElement("li")
//   li.textContent = nombre
//   listaDevs.appendChild(li)
// }

// Ejercicio 5: Asincronía, fetch y dom

// 5.1 Añade un evento al botón btn-cargar.
// Al hacer click debe hacer un fetch a la API JSONPlaceholder. Mostrar por consola cuando lleguen los datos.

const btnCargar = document.getElementById("btn-cargar")

// Usando .then

// btnCargar.addEventListener("click", () => {
//   fetch("https://fakestoreapi.com/products?limit=5")
//     .then((response) => {
//       if (!response.ok) {
//         throw new Error("Error al llamar a la api")
//       }
//       return response.json()
//     })
//     .then((data) => {
//       console.log(data)
//     })
//     .catch((error) => {
//       console.error(error)
//     })
// })

// Usando async/await

// btnCargar.addEventListener("click", async () => {
//   try {
//     const response = await fetch("https://fakestoreapi.com/products?limit=5")
//     const products = await response.json()
//     console.log(products)
//   } catch (error) {
//     console.log(error)
//   }
// })

// 5.2 Crea una función cargar productos. Itera los productos y pinta título, precio e imagen de cada producto en la ul con id lista-productos

const listaProductos = document.getElementById("lista-productos")

const cargarProductos = async () => {
  try {
    const response = await fetch("https://fakestoreapi.com/products?limit=5")
    const productos = await response.json()
    console.log(productos)

    listaProductos.innerHTML = ""

    for (const producto of productos) {
      const { title, price, image } = producto
      const li = document.createElement("li")
      const template = `
        <img src="${image}" alt="${title}" />
        <div>
          <strong>${title}</strong>
          <p>${price}</p>
        </div>
      `
      li.innerHTML = template

      listaProductos.appendChild(li)
    }
  } catch (error) {
    console.log(error)
  }
}

btnCargar.addEventListener("click", cargarProductos)