Skip to main content
1 de 2

let container = document.querySelector('.card-container')
const img = `https://source.unsplash.com/random/200x150?person`
const imgPost = `https://source.unsplash.com/random/600x400?nature`

async function principal(){
    [textos, names] = await Promise.all([
        fetch(`https://jsonplaceholder.typicode.com/posts`),
        fetch(`https://jsonplaceholder.typicode.com/users`)
    ]);
    let textObj = await textos.json()
    let nameObj = await names.json()

    let html = ''

    let fotoPerfil = await distinto(img)
    let fotoPost = await distinto(imgPost)
    console.log(fotoPerfil)
    console.log(fotoPost)
    let foto1;
    let foto2;
    
    for (let i = 0; i < 10; i++) {
        let texto = textObj[i].title;
        let name = nameObj[i].name;

        if (foto1 !== fotoPerfil[i]) {
            html += `<div class="card">
        <div class="card-header">
        <img src="${fotoPerfil[i]}" class="fadeIn">
        <h3 class="fadeIn">${name}</h3>
        </div>
        <div class="card-content">
        <div class="card-text">
        <p class="fadeIn">${texto}</p>
        </div>
        <div class="card-post">
        <img src="${fotoPost[i]}" class="fadeIn">
        </div>
        </div>
        </div>`
        foto1 = fotoPerfil[i]
        foto2 = fotoPost[i]

        }else {
            console.log('js = kk')
        }
    }
    container.innerHTML = html
    /* checkBoxes() */
}
principal()



async function distinto(dir){
    let ArrFotos = await Promise.all([fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir)])

    let fotos = []

    ArrFotos.forEach(obj =>{
        fotos.push(obj.url)
    })

    let fotosUnicas = [...new Set(fotos)]

    return fotosUnicas
}