ForEach

2/28
Recursos

El m茅todo forEach de los arrays consiste en ejecutar una funci贸n (callback) para cada uno de los elementos iterados. Iterar significa repetir una acci贸n varias veces.

Este m茅todo recibe dos argumentos:

  • La funci贸n que itera cada elemento del array (obligatorio).
  • Un objeto al que puede hacer referencia el contexto this en la funci贸n. Si se lo omite, ser谩 undefined. Recuerde que this en arrow functions es el objeto global.
array.forEach(function(), thisArg)

La funci贸n, que recibe como argumento el m茅todo forEach, utiliza tres par谩metros opcionales:

  • El valor actual del elemento iterado. Es decir, si es la primera iteraci贸n, ser谩 el primer elemento, y as铆 sucesivamente.
  • El 铆ndice del elemento iterado. Es decir, si es la primera iteraci贸n, ser谩 el 铆ndice 0, y as铆 sucesivamente.
  • El array que est谩 iterando.
array.forEach(function(element, index, array))

Diferencia entre la estructura for y el m茅todo forEach

Los m茅todos de arrays nos permiten realizar algoritmos con una menor cantidad de l铆neas que una estructura for, con un resultado igual o parecido.

const letters=['a','b','c']

// Utilizando la estructura repetitiva for
for(let index=0; index<letters.length; index++){
    const element=letters[index]
    console.log('for',element)
}

// Utilizando el m茅todo forEach
letters.forEach(item => console.log('forEach',item))

Mostrar elementos de un array al usuario

Ahora que ya conoces c贸mo funciona el m茅todo forEach, util铆zalo para agregar elementos al HTML y as铆 que el usuario lo mire.

Por ejemplo, en un archivo HTML agrega una etiqueta div con un id app, que nos servir谩 para agregar nuestros elementos.

<div id="app"></div>

Despu茅s crea la l贸gica en un archivo de JavaScript.

const products = [
  { title: 'Burger', price: 121 },
  { title: 'Pizza', price: 20 },
  { title: 'Soda', price: 5 },
]

const app = document.getElementById('app')

products.forEach(product => {
  app.innerHTML += `<li>${product.title} -$ ${product.price}</li>`
})

Y listo, en pantalla aparecer谩n los elementos del array products con su t铆tulo y precio. Revisa el resultado en este codi.link.

Ejercicio utilizando la funci贸n forEach

Crea una lista de tareas, a partir de un array que contenga el t铆tulo y el estado (completado o no) y mu茅stralos en un archivo HTML. Puedes utilizar un input de tipo checkbox para indicar el estado de la tarea. 隆Comparte tu trabajo en la secci贸n de aportes!

Contribuci贸n creada por: Andr茅s Guano.

Aportes 247

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Tip

En el curso de Manipulaci贸n del DOM el profesor nos dice lo malo que es para el performance hacer muchas llamadas al DOM por lo que si quieres mejorar esto un poco, podrias:

En lugar de insertar en cada llamado al HTML, los almacenamos todos en un array

const nodes = []

y luego en cada llamado lo a帽adimos al array

tasks.forEach(({ title, done }) => {
    const element = `
         <li>
          	 <input 
                     type='checkbox' 
                     id='${title}' 
                     name='${title}' 
                     ${done && 'checked'} />
                  <label for='${title}' >${title} </label>   
         </li>`;
nodes.append(element)                    

por 煤ltimo a帽adimos todo el array al DOM

app.append(nodes)

De esta forma reducimos la cantidad de inserciones al DOM, y mejoramos el performance un poco 馃槂

Hola!
aqu铆 dejo mi soluci贸n al reto propuesto 馃槃

const app = document.getElementById('app');

const tasks = [
    { title: 'make dinner', done: false },
    { title: 'sweep the floor', done: true },
    { title: 'feed the kittens', done: true },
    { title: 'buy groceries', done: false },
    { title: 'take a bath', done: true },
];

tasks.forEach(({ title, done }) => {
    const element = `
         <li>
          	 <input 
                     type='checkbox' 
                     id='${title}' 
                     name='${title}' 
                     ${done && 'checked'} />
                  <label for='${title}' >${title} </label>   
         </li>`;
app.insertAdjacentHTML('beforeend', element);});

Soy novato en Js vanilla pero solucione as铆

<script>
      const tasks = [
        {
          task: 'Tarea 1',
          descp: 'Descripcion de la tarea 1',
          done: false,
        },
        {
          task: 'Tarea 2',
          descp: 'Descripcion de la tarea 2',
          done: true,
        },
        {
          task: 'Tarea 3',
          descp: 'Descripcion de la tarea 3',
          done: false,
        },
        {
          task: 'Tarea 4',
          descp: 'Descripcion de la tarea 4',
          done: true,
        },
      ];
      
      const app = document.getElementById('app');

      tasks.forEach(task => {
        app.innerHTML += `
        <li> 
          Nombre: ${task.task} ||  
          Descripci贸n: ${task.descp} - 
          <input type="checkbox" ${task.done ? 'checked' : ''}/>
        </li>`
      });
    </script>
<body>
    <div id="app"></div>
    <script>
        const works = [
            {title: 'Design logo', status: 'Complete'},
            {title: 'Develop head', status: 'Incomplete'},
            {title: 'Develop Main', status: 'Complete'},
            {title: 'Develop Footer', status: 'Incomplete'},
        ];

        const app = document.getElementById('app');
        works.forEach(work => {
            app.innerHTML += `<li >${work.title} - ${work.status} <input type="checkbox"> </li>`;
        });
    </script>   
</body>

Desde Visual Studio Code, tambien se puede utilizar la extension de Live Server de Ritwick Dey para usarla como servidor y ver pintado el codigo en HTML

Extensi贸n Code Runner para VS Code, utilizada por el profesor

Mi soluci贸n al reto : )
.
Hice un array con tareas, las cuales tiene un t铆tulo y pueden estarn completas o incompletas . Si est谩n completas se renderizan con un 鈥渃hecked input鈥 y si no se presentan con la casilla a煤n vac铆a.
.

.

<div id="app">
    </div>
    <script>
        let tasks = [
            {title: "Estudiar c谩lculo", done: false},
            {title: "Estudiar JavaScript", done: true},
            {title: "Estudiar ingl茅s", done: true},
            {title: "Hacer ejercicio", done: false}
        ]

        tasks.forEach(task => {
            if(task.done == true) {
                app.innerHTML += 
		`<p> <input type="checkbox" name="${task.title}" checked> 
		<label for="${task.title}">${task.title}</label> <\p>`
            } else {
                app.innerHTML += 
		`<p> <input type="checkbox" name="${task.title}"> 
		<label for="${task.title}">${task.title}</label> <\p>`
            }           
        });
    </script>

ForEach m茅todo 煤til para recorrer un array y realizar alguna operaci贸n sobre cada elemento del mismo

Mejor que el live-server de VS Code y m谩s f谩cil que usar npx http-server puedes instalar el paquete live-server de npm. Si ya tienes instalado node y npm puedes instalar este paquete globalmente con la siguiente l铆nea:

npm install -g live-server

Entonces solamente es cuesti贸n de que pongas este comando para correrlo:

live-server

Listo, ahora se te abrir谩 en el navegador.

Esta es mi soluci贸n, lo hice agregando Node elements al dom en vez de hacerlo con InnerHTML, ya que me parece mas cool, aunque alargue un poco el c贸digo!

Lanzar http-server:

npx http-server client 


Le agrege algo CSS y por lo tanto en el cliclo forEach tuve que poner m谩s c贸digo para crear m谩s elementos en el DOM,
aunque me falt贸 investigar como marcar los inputs como terminados.

馃槷 Genial, no sabia lo poderoso que es ForEach

Mi soluci贸n del reto 馃槉

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulaci贸n de arrays</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
        }

        h2 {
            text-align: center;
            margin-bottom: 10px;
        }

        .list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
            justify-content: center;
            align-items: center;
            margin: auto;
            width: 700px;
            margin-bottom: 20px;
        }

        .list>li {
            align-self: center;
            border: 1px solid gray;
            padding: 5px 10px;
            border-radius: 5px;
            text-transform: capitalize;
        }

        .list>li h4 {
            margin: 5px 0;
        }

        .list>li img {
            width: 100px;
            height: 100px;
        }

        .list>li span {
            font-size: 10px;
            font-weight: bold;
            background-color: gainsboro;
            padding: 2px 5px;
            border-radius: 5px;
        }

        .list>li p {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <h2>Lista de frutas</h2>
    <ul id="app" class="list">
    </ul>
    <h2>Lista de tareas</h2>
    <ul id="tasks" class="list">
    </ul>
</body>
<script>
    const products = [
        {
            id: 1,
            name: "platano",
            stock: 10,
            price: 2.0,
            image: "https://i.ibb.co/7bC8szm/platano.png",
            category: {
                id: 1,
                name: "frutas frescas",
                image: "https://i.ibb.co/BqWwTkD/categoria-fruta.webp",
            },
        },
        {
            id: 2,
            name: "fresa",
            stock: 10,
            price: 5.0,
            image: "https://i.ibb.co/hKNwfmP/fresa.png",
            category: {
                id: 1,
                name: "frutas frescas",
                image: "https://i.ibb.co/BqWwTkD/categoria-fruta.webp",
            },
        },
        {
            id: 3,
            name: "mandarina",
            stock: 10,
            price: 3.5,
            image: "https://i.ibb.co/7bC8szm/platano.png",
            category: {
                id: 1,
                name: "frutas frescas",
                image: "https://i.ibb.co/M2Pt0xX/mandarina.png",
            },
        },
    ];
    const tasks = [
        {
            id: 1,
            name: "Comprar frutas",
            completed: false,
        },
        {
            id: 2,
            name: "Comprar verduras",
            completed: false,
        },
        {
            id: 3,
            name: "Comprar carne",
            completed: true,
        },
    ];
    const formatoSoles = (monto) => {
        let formatoSoles = new Intl.NumberFormat('es-PE', {
            style: 'currency',
            currency: 'PEN',
        });
        return formatoSoles.format(monto);
    };
    const app = document.getElementById('app');
    products.forEach((item) => {
        const list = document.createElement('li');
        list.innerHTML += `
            <span>${item.category.name}</span>
            <h4>${item.name}</h4>
            <p>
                <label>${formatoSoles(item.price)}</label>
                <label>${item.stock} productos</label>    
            </p>
            <img src="${item.image}" alt="${item.name}">
        `;
        app.appendChild(list);
    });
    const task = document.getElementById('tasks');
    tasks.forEach((item) => {
        const list = document.createElement('li');
        list.innerHTML += `
            <label for="task"> ${item.name}</label><br>
        `;
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = 'completed';
        checkbox.name = 'task';
        checkbox.checked = item.completed;
        list.insertAdjacentElement('afterbegin', checkbox);
        task.appendChild(list);
    });
</script>

</html>

Advice


  • Pueden correr el html con una extensi贸n que se llama live server de vsc.

Pd


  • Ni siquiera van a tener que recargar la p谩gina

Mi aporte 馃槂

code:

    <div id="root"></div>
    <h2>Tareas Completadas</h2>
    <ul id="list"></ul>
    <script src="./src/index.js" type="module"></script>
</body>
const ELEMENT = [
  { name: "tarea", value: "Limpieza", id: 1 },
  { name: "tarea", value: "Leer", id: 2 },
  { name: "tarea", value: "Salir a caminar", id: 3 },
  { name: "tarea", value: "Desayunar", id: 4 },
];

ELEMENT.forEach(({ value, name, id }) => {
  document.getElementById("root").innerHTML += `
    <input type="checkbox" value=${value} name="${name}" id="${id}">${value} `;
});

ELEMENT.forEach((list) => {
  const taskId = document.getElementById(list.id);
  taskId.addEventListener("click", () => {
    if (taskId.checked) {
      document.getElementById("list").innerHTML += `
              <li id="text${taskId.id}" name="${taskId.name}"> ${taskId.value}: Completada </li>
            `;
    }
    if (!taskId.checked) {
      const rm = document.getElementById(`text${taskId.id}`);
      rm.parentNode.removeChild(rm);
    }
  });
});
``

Reto completado:

// reto: renderizar una lista de tareas con forEach
    const reto = document.getElementById('reto');
    
    const tasks = [{
        task: '10 minutos de lectura',
        status: 'completed',
        repeat: true
      },
      {
        task: 'tomar curso de intro a node.js',
        status: 'ongoing',
        repeat: false
      },
      {
        task: 'hacer reto de forEach',
        status: 'completed',
        repeat: false
      },
      {
        task: 'ba帽ar al perro',
        status: 'incompleted',
        repeat: true
      },
      {
        task: 'ba帽arme',
        status: 'incompleted',
        repeat: true
      }
    ];

    tasks.forEach(t => {
      reto.innerHTML += `
        <div>
          <input type="checkbox" id="${t.task}" name="${t.task}">
          <label for="${t.task}">${t.task} | status: ${t.status} | 驴se repite?: ${t.repeat}</label>
        </div>
      `
    });

Aqui dejo mi reto, quise como lograr que se tachara al tocar las checkbox, pero no logre que se quitaran, tal vez la logica no sirva para eso, intente con if y no funciono igual, pero la meta era lograr que se tacharan jaja
Igualmente trate de hacerlo con forEach pero creo aqui si era necesario el for normal, ya que necesitaba el numero del array para el label.

 const form = document.getElementById('form')
        let tasks = [
          {description: 'Estudiar ingles', status: false}, 
          {description: 'Estudiar porlomenos 1 hora', status: false}, 
          {description: 'Organizar reunion de congreso', status: false}, 
          {description: 'Hacer ejercicio manana', status: false}, 
        ]
        tasks.forEach((task)=>{
        
          form.innerHTML += ` 
          </form><label for="${task.description}" class="label">
            <input id="${task.description}" type="checkbox" class="checkbox">
            ${task.description}
            </label><br>
            `
      })
      const label = document.querySelectorAll("label");
      const checkbox = document.querySelectorAll(".checkbox");
      console.log(checkbox);
      console.log(label);
      
      for (let i = 0; i < checkbox.length; i++) {   
          checkbox[i].addEventListener("click",function(){label[i].style.textDecoration = 'line-through'});
        }

Esta es mi soluci贸n! No est谩 muy trabajada, hice algo r谩pido simplemente para probar:
.

html

<body>
        <main>
            <div id="task-list"></div>
        </main>
        <template id="task-template">
            <label class="task-label">
                <input class="task" type="checkbox" />
            </label>
        </template>

        <script src=" <!-- codigo JS -->"></script> 
    </body>

JS

const taskList = document.getElementById('task-list')
const template = document.getElementById('task-template').content
const fragment = document.createDocumentFragment()

const tasks = [
    { content: 'Terminar la tarea', complete: false },
    { content: 'Regar las plantas', complete: false },
    { content: 'Ver curso', complete: false },
]

tasks.forEach(task => {
    const clone = template.cloneNode(true)
    const label = clone.querySelector('.task-label')

    label.innerHTML += task.content
    label.querySelector('.task').addEventListener('change', e => {
        task.complete ? (task.complete = false) : (task.complete = true)
        // console.log(task)
    })

    fragment.appendChild(clone)
})

taskList.appendChild(fragment)

pueden usar https://stackblitz.com/ para no generar un server propio y darle muchas vueltas

listo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="lista"></div>
    <script>
        const ingredientes = [
            { element: "zanahoria", status: "Complete"},
            { element: "pollo", status: "Imcomplete"},
            { element: "lechuga", status: "Complete"},
            { element: "arroz", status: "Imcomplete"},
            { element: "papa", status: "Imcomplete"},
            { element: "pescado", status: "Complete"},
        ]

        const lista = document.getElementById("lista");
        ingredientes.forEach(ingrediente => [
            lista.innerHTML += `<li>${ingrediente.element} - ${ingrediente.status} <input type="checkbox"></li>`
        ]);
    </script>
</body>
</html>

Adjunto mi reto

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto For each</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body class="container">
    <div class="titulo" >LISTA DE TAREAS</div>
    <div id="app"></div>


</body>


<script src="/server/01-for-each-reto.js"></script>

</html> 

JS

const tareas = [
    {titulo: 'Lavar el carro', descripcion: 'Lavar el carro con la manguera nueva', done: false},
    {titulo: 'Sacar el perro ', descripcion: 'Dar la vuelta a la manzana', done: true},
    {titulo: 'Limpiar las ventanas ', descripcion: 'Ventanas del edificio 301', done: true},
    {titulo: 'Estudiar para el examen ', descripcion: 'Examen de matematicas', done: true,}

];
const app = document.getElementById('app');
tareas.forEach(tarea => {
    app.innerHTML += `<li>Tarea: ${tarea.titulo} Descripcion: ${tarea .descripcion}  <input type="checkbox" ${tarea.done ? 'checked' : ''} /> </li>`
}) 

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 html {
    font-size: 62.2%;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    align-items: center;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    height: 800px;
}

#app {
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 700px;
    padding: 30px;
    list-style: circle;
}

.titulo {
    font-size: 40px;

}```


const tasks = [
  { name: 'study', done: true },
  { name: 'gym', done: false },
  { name: 'food', done: true },
  { name: 'clothes', done: false },
  { name: 'books', done: false },
  { name: 'games', done: true },
];

const app = document.getElementById('app');
tasks.forEach((task) => {
  app.innerHTML += `
  <li>
    <input type="checkbox" ${task.done ? 'checked' : ''} />
    <label>${task.name}</label>  
  </li>`;
});

Hola, yo lo realice de esta forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const products = [
            { title: 'Burger', price: 121 },
            {title: 'pizza', price: 20},
        ];

        const app = document.getElementById('app');
        products.forEach(product => {
            app.innerHTML += `<li>${product.title} - ${product.price}</li>`;
        });

        const tasks = [
            {title: 'task1', done: true},
            { title: 'task2', done: false},
            { title: 'task3', done: true}
        ];

        tasks.forEach(task => {
            let item = document.createElement('li');
            let input = document.createElement('input');
            input.type = 'checkbox';

            if(task.done === true){
                input.checked = true;
            }

            item.innerHTML = `<p>${task.title}</p>`;
            item.appendChild(input);
            app.appendChild(item);
            
            
            
        })
    </script>
</body>
</html>

Esta es mi soluci贸n al reto, el checkbox de la lista de tareas se renderiza de acuerdo a si la tarea esta completada o no 馃槂

 <script>

        const tasks =[
            { description: 'Make a Web page', completed: false },
            { description: 'Take a course', completed: true },
            { description: 'Do yoga', completed: false },
            { description: 'Go to the supermarket', completed: true }
        ];

        const app = document.getElementById('app');
        tasks.forEach( task => {
            app.innerHTML += `<label><input type="checkbox" value="checkbox" 
                ${task.completed === true ? 'checked' : ''}>${task.description}</label><br>` 
        });
        
    </script>

![](

Mi soluci贸n al reto

Mi soluci贸n inspirado en aportes de compa帽eros.
.

.
Resultado visto en el navegador
.

HTML

<body>
    <div id="f-E">
    </div>
    <script src="main.js"></script>
</body>
const tasks = [
  { title: 'GIT', status: false },
  { title: 'Ingles', status: false },
  { title: 'JavaScript', status: true },
  { title: 'React', status: false }
]

const app = document.getElementById('app')

tasks.forEach(({ title, status }) => {
  app.innerHTML += `<li>${title} - ${status} <input type="checkbox" ${status ? 'checked' : ''} /></li>`
})

Aqu铆 mi soluci贸n, me apoy茅 de c贸digo de algunos compa帽eros porque no ten铆a idea de como agregar el checkbox.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reto</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const tareas = [
        {curso: "EcmaScript", profesor: "Oscar Barajas", numeroDeClases: 14, estado: true},
        {curso: "Manipulaci贸n de Arrays", profesor: "Nicolas Molina", numeroDeClases: 27, estado: false},
        {curso: "Curso de asincronismo", profesor: "Oscar Barajas", numeroDeClases: 12, estado: false},
        {curso: "Curso de consumo de API rest", profesor: "Juan Castro", numeroDeClases: 20, estado: false},
        ];
        const app = document.getElementById("app");
        tareas.forEach(tarea => {
            app.innerHTML += `<li> Curso: ${tarea.curso} || Profesor:${tarea.profesor} || N煤mero de clases:${tarea.numeroDeClases} || <input type="checkbox" ${tarea.estado? 'checked' : ''}/></li>`;
        })
    </script>
</body>
</html>

Reto

const list = document.getElementById("list");

const toDo = [
    { place: "home", activity: "cleanning"},
    { place: "work", activity: "data warehouse" },
    { place: "school", activity: "project"}
];

toDo.forEach(element => {
    list.innerHTML += `<li>${element.place}: ${element.activity} <input type="checkbox"></input></li>`;
})

Mi soluci贸n al reto:
Mi lista de tareas ek JS funciona bien, agrega y elimina tareas. Solo que cuando la elimina la tarea del Array no cambia en el HTML, falta ese detalle por solucionar.
HTML

<section class="tasklist-section">
            <div class="tasklist-container">
                <label for="tarea" class="tasklist_input-container">
                    <span class="tasklist_input-container--title">Tarea:</span>
                    <input type="text" placeholder="Ej. Hacer ejercicio..." id="tarea" name="tarea" class="tasklist_input-container--input">    
                </label>
                <button id="btn-task" class="add-btn">A帽adir</button>
                <div class="lista-tareas">
                    <h2 class="lista-tareas_title">Tareas</h2>
                </div>
                <button class="delete">Eliminar tareas Seleccionadas</button>
            </div>
        </section>

JavaScript

const tarea = document.querySelector('#tarea');
const tareasPendientes = document.querySelector('.lista-tareas');
const btn = document.querySelector('#btn-task');
const tareas = [];
const tareasListas = [];
let checkbox;
const delete_btn = document.querySelector('.delete')

btn.addEventListener('click', crearTarea)

function crearTarea(){
    let task = tarea.value
    if(task == '' || task == null){
        alert("Deber introducir una tarea")    
    }
    else {
        tareas.push({title: task, completed: false})
        tareasPendientes.innerHTML += `<div><li>${task}</li><input type="checkbox" id="task-input"></div>`
        
        checkbox = document.getElementById('task-input');
        tareas.forEach(task => task.completed = checkbox)
        console.log(tareas)
    }
}

delete_btn.addEventListener('click', function(){
    tareas.forEach(task => {
        if(task.completed.checked){
            tareas.splice(task, 1)
            console.log("yuhu")
        }
        else {
            console.log("nahh")
        }
        console.log(tareas)
    })
})

Asi lo hice

     <div id="app"></div>
    <script>
    
        const app = document.getElementById("app")
        const tareas = [
            { tarea: "Limpiar", estado: true },
            { tarea: "Hacer la tarea", estado: true },
            { tarea: "Dormir", estado: false },
        ]

        tareas.forEach(tarea => {
            if(tarea.estado){
                app.innerHTML += `<label style="display: block;">Tarea: ${tarea.tarea}
                        estado: ${tarea.estado}</label>  <input type="checkbox" checked>`;
            }else{
                app.innerHTML += `<label style="display: block;">Tarea: ${tarea.tarea}
                        estado: ${tarea.estado}</label>  <input type="checkbox">`;
            }    
        });


    </script>



const works = [
            { title: 'bath', time: '5:00 am'},
            { title: 'breackfast', time: '5:30 am'},
            { title: 'take a bus', time: '6:00 am'},
            { title: 'work', time: '7:00 am'},
            { title: 'home', time: '7:00 pm'},
            
        ];
        const app = document.getElementById('app');
        works.forEach(tareas => {
            app.innerHTML+=`<li>${tareas.title}-${tareas.time} </li> `
        })

Yo lo hice de la siguiente manera鈥

const app = document.getElementById('app');
const taskList = [
    {task: 'Make Dinner', done: true},
    {task: 'Go to shopping', done: true},
    {task: 'Make my home-work', done: false},
    {task: 'Pick up my mom', done: false},
    {task: 'Call my dad', done: false},
    {task: 'Call the radio station', done: true},
]
let isCheck;
let counter = 0;
taskList.forEach(element => {
    isCheck = "";
    if(element.done){
        isCheck = "checked"
        counter++
    }
    app.innerHTML += `Task: ${element.task}<br>Done:<input type="checkbox" ${isCheck}> <br><br>`
});

document.getElementById('counter').innerHTML = `Cantidad de task: ${taskList.length}<br>Completada: ${counter}`

Esto fue lo que a m铆 me se ocurri贸:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>For each reto</title>
</head>
<body>
  <div id="app">
    <label for="tarea">Tarea: </label>
    <input type="text" name="" id="tarea" placeholder="Tarea">
    <label for="completada">驴Completada?</label>
    <input type="checkbox" name="" id="completada">
    <button type="button" id="botonAgregarTarea">Agregar tarea</button>
    <button type="button" id="botonMostrarTareas">Mostrar tareas</button>
    <ul id="allTasks"></ul>
  </div>
  <script src="../server/forEachReto.js"></script>
</body>
</html>
const app = document.getElementById('app');
const tarea = document.getElementById('tarea');
const completada = document.getElementById('completada');
const botonAgregarTarea = document.getElementById('botonAgregarTarea');
const botonMostrarTareas = document.getElementById('botonMostrarTareas');
const allTasks = document.getElementById('allTasks');
const arrayTareas = [];

botonAgregarTarea.addEventListener('click', () => {
  arrayTareas.push({
    tarea: tarea.value,
    completada: completada.checked
  });

  alert(`Tarea ${tarea.value} agregada`);
});

botonMostrarTareas.addEventListener('click', () => {
  allTasks.innerHTML = '';
  arrayTareas.forEach(element => {
    allTasks.innerHTML += `<li>${element.tarea} - 驴Completada? -> ${element.completada} </li>`
  });
});

Tambien existe la opcion de usar

for (elemento in elementos) {
	// hacer algo
}
      const tasklist = document.getElementById('tasklist');
      const tasks = [
        {desc: 'Comprar pollo', day: 'hoy'},
        {desc: 'Limpiar habitaci贸n', day: 'ma帽ana'},
        {desc: 'Recoger archivos', day: 'hoy'},
      ];
      tasks.forEach((e) => {
        tasklist.innerHTML += `<li><input type="checkbox"> ${e.desc}, ${e.day}</li>`;
      });

Esta es mi soluci贸n al reto. agregue una clase css para aplicar estilos y asi me quedo.

const app = document.getElementById("app");
        const tasks = [
            {title: "aprender javascript", completed: false},
            {title: "Limpiar la habitacion", completed: false},
            {title: "empezar el curso de arrays con javascript", completed: true},
        ];

        tasks.forEach(task => {
            app.innerHTML += `
                <div>
                    <input type="checkbox" ${task.completed && "checked"}/>
                    <span class="${task.completed && 'checked'}">${task.title}</span>   
                </div>
            `;
        })

Aqui esta mi reto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="list"></div>
    <script>
      const tareas = [
        {title: 'Hacer la cama', hecha:true},
        {title: 'Lavar los trates', hecha:false},
        {title: 'Lavarse los dientes', hecha:true},
      ];
      const list = document.getElementById("list");
      tareas.forEach(tareas =>{
        list.innerHTML += `<li>${tareas.title} - ${tareas.hecha}</li>`;
      })
    </script>
</body>
</html>

Algo sencillo:

<script>
    const tasks =[
        {name: 'Wake Up', done: true},
        {name: 'Get Up', done: true},
        {name: 'Go to the Gym', done: true},
        {name: 'Make breakfast', done: true},
        {name: 'Go to Work', done: false},
        {name: 'Lunch', done: false},
        {name: 'Meeting ', done: false},
        {name: 'Go home', done: false},
        {name: 'Study English', done: false},
        {name: 'Make and eat dinner', done: false},
        {name: 'Sleep', done: true},

    ];
    const lisTasks = document.getElementById('list');
    tasks.forEach(listT =>{
        lisTasks.innerHTML +=`<li>
                                Name: ${listT.name}
                                <input type='checkbox'${listT.done?'checked':''}/>
                            </li>`

    });

</script>
```js const task = document.getElementById('task'); const setArray = [ { title: 'Programar', status: false, priority: 'Alta' }, { title: 'Escombrar', status: false, priority: 'Media' }, { title: 'Ba帽arse', status: false, priority: 'Baja' } ]; setArray.forEach(taskItem => { const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.name = 'task'; checkbox.value = taskItem.title; checkbox.checked = taskItem.status; checkbox.addEventListener('change', function() { taskItem.status = this.checked; console.log(`${taskItem.title} status changed to: ${this.checked}`); }); const label = document.createElement('label'); label.textContent = `${taskItem.title} prioridad: ${taskItem.priority}`; const br = document.createElement('br'); // Salto de l铆nea entre checkboxes task.appendChild(checkbox); task.appendChild(label); task.appendChild(br); }); ```Este es mi c贸digo lo hice con lo aprendido en cursos anteriores, ya que solucionarlo como nos ense帽贸 recientemente no pude resolverlo por que aun no estoy familiarizado con la sintaxis y el orden
```js ```
Lo hice de esta manera, algo simple, pero efectivo: ```js const Agend =[ {title: 'Activation routine', state: 'Complete'}, {title: 'Exercise', state: 'Complete'}, {title: 'Study Dev', state: 'Complete'}, {title: 'Multitasking', state: 'Pending'}, {title: 'Work', state: 'Pending'}, {title: 'Read Book', state: 'Complete'}, {title: 'English Practice', state: 'Pending'}, ]; const app=document.getElementById('app'); Agend.forEach(item =>{ if(item.state === 'Complete'){ app.innerHTML+=`
  • <input type="checkbox" value="" checked='checked'>${item.title}
  • `; }else{ app.innerHTML+=`
  • ${item.title} - ${item.state}
  • `; } }) ```
    hola..como hacen para clonar, yo tengo dias intentando y da error, y le hice un fork en git y no tiene la carpeta de cliente ni server

    <!DOCTYPE html>
    <html lang=鈥渆n鈥>
    <head>
    <meta charset=鈥淯TF-8鈥 />
    <meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥 />
    <title>Document</title>
    </head>
    <body>
    <div id=鈥渁pp鈥></div>
    <script>
    const app = document.getElementById(鈥渁pp鈥);

      let tareas = [
        { tarea: "Hacer la cama", estado: "hecho" },
        { tarea: "limpiar la cocina", estado: "hecho" },
        { tarea: "Estudiar", estado: "hecho" },
      ];
    
      tareas.forEach((tarea) => {
        app.innerHTML += `<input type="checkbox">${tarea.tarea} ${tarea.estado}</input type="checkbox">`;
      });
    </script>
    

    </body>
    </html>

    ```js const reto = document.querySelector('.reto'); const tasks = [ {name:'Desayunar', description:'Primera comida del dia', completed: false}, {name:'Entrenar', description:'Realizar actividad f铆sica', completed: true}, {name:'Ducharse', description:'Tomar un ba帽o corto', completed: true}, {name:'Estudiar Js', description:'Seguir un curso en Platzi', completed: true}, {name:'Dormir', description:'Relajarse en la habitaci贸n', completed: false}, ]; tasks.forEach((task)=>{ reto.innerHTML += ` <label for="${task.name}">${task.description}</label> <input id="${task.name}" type= "checkbox" ${task.completed ? 'checked' : ''}/> `; }); ```Una soluci贸n simple aplicando lo aprendido en esta clase Hay que recordar tener en el html un div con la clase seleccionada en Js, en este caso con la clase reto ```js
    ```
    Por lo general he utilizado la extension de VSC Live Server y es r谩pida , para m铆 funciona muy bien sin tener que instalar otra Librer铆a por node. Sin embargo, no se si luego sea necesario. Por ahora funciona y es mas pr谩ctica.
    Hola, esta es mi solucion al ejercicio: ```js const app = document.getElementById('app'); const tasks = [ {title: 'Tarea uno', completed: false}, {title: 'Tarea dos', completed: false}, {title: 'Tarea tres', completed: true}, {title: 'Tarea cuatro', completed: false}, {title: 'Tarea cinco', completed: true}, ]; tasks.forEach(({ title, completed }) => { const element = `
  • <input type="checkbox" id="${title}" name="${title}" ${completed ? 'checked' : ''}> <label for="${title}">${title}</label>
  • `; app.innerHTML += element; }); ```const app = document.getElementById('app'); 聽 聽 聽 聽 const tasks = \[聽 聽 聽 聽 聽 聽 {title: 'Tarea uno', 聽 聽completed: false},聽 聽 聽 聽 聽 聽 {title: 'Tarea dos', 聽 聽completed: false},聽 聽 聽 聽 聽 聽 {title: 'Tarea tres', 聽 completed: true},聽 聽 聽 聽 聽 聽 {title: 'Tarea cuatro', completed: false},聽 聽 聽 聽 聽 聽 {title: 'Tarea cinco', 聽completed: true},聽 聽 聽 聽 ]; 聽 聽 聽 聽 tasks.forEach(({ title, completed }) => {聽 聽 聽 聽 聽 聽 const element = `聽 聽 聽 聽 聽 聽 聽 聽 \
  • 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 \<input type="checkbox" id="${title}" name="${title}" ${completed ? 'checked' : ''}>聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 \<label for="${title}">${title}\</label>聽 聽 聽 聽 聽 聽 聽 聽 \
  • `;聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 app.innerHTML += element;聽 聽 聽 聽 });

    Hice el array y le agregue otras propiedades como prioridad y fecha limite, as铆 quedo.

    ![]()

    <script>
            const tasks = [
                {title: 'Call my mom', date: new Date(2024, 0, 16), priority: '馃敟', completed: true}, 
                {title: 'Do the dishes', date: new Date(2024, 0, 16), priority: '鈿栵笍', completed: true},
                {title: 'Workout', date: new Date(2024, 0, 17), priority: '馃敟', completed: false},
                {title: 'Go shopping', date: new Date(2024, 0, 18), priority: '鉂勶笍', completed: false}
            ]
    
            const taskPlanner = document.getElementById('task-planner');
            tasks.forEach(task => {
                taskPlanner.innerHTML += 
                `<li>
                    <input type='checkbox' name='${task.title}' 
                         ${task.completed && 'checked'} id=''>
                    <label for='${task.title}'>${task.title} - Priority: ${task.priority}</label>
                    <time datetime='${task.date}'>- Deadline: ${task.date.toLocaleDateString('en-US')}</time>
                </li>`;
            });
        </script>
    
    Mi solucion al reto: ![](https://s13.gifyu.com/images/SjJyN.png) Resultado: ![](https://s13.gifyu.com/images/SjJyI.png)

    reto completado

    const tareasDelDia = [
        {tarea: 'leer', hecha: true},
        {tarea: 'estirar', hecha: false},
        {tarea: 'gym', hecha: true},
        {tarea: 'desayunar', hecha: false},
    ]
    
    tareasDelDia.forEach( tarea => {
        if (tarea.hecha) {
            app.innerHTML +=
            `<li> 
               la tarea es ${tarea.tarea} <input type="checkbox" checked>
            </li>`
        } else {
            app.innerHTML +=
            `<li> 
            la tarea es ${tarea.tarea} <input type="checkbox">
            </li>`
        }
    })
    
    Mi solucion al ejercicio: ```js let arr = [ {title: "Cepillarme", estado: true}, {title: "Estudiar", estado: true}, {title: "Ba帽arme", estado: false}, {title: "Comer", estado: false}, ] arr.forEach(tarea => { if (tarea.estado == true) { divTarea.innerHTML += `
  • ${tarea.title} - <input type="checkbox" checked>
  • ` } else { divTarea.innerHTML += `
  • ${tarea.title} - <input type="checkbox">
  • ` } }) ```
    Hola a todos, comparto mi codigo de ejemplo usando forEach ```js students.forEach((student) => { const divInput = document.createElement("div"); const nameStudent = document.createElement('h1'); const divSubject = document.createElement("ul"); nameStudent.textContent = `${student.name}`; student.workathome.forEach((subject) => { const textLi = document.createElement("li"); const textInput = document.createElement("input"); textInput.type = "checkbox"; textLi.textContent = `${subject}`; divSubject.appendChild(textLi); textLi.appendChild(textInput); }); divstudents.appendChild(divInput); divInput.appendChild(nameStudent); divInput.appendChild(divSubject); }); ```Hola a todos, comparto mi codigo de ejemplo usando forEach
    ```js ```Hola a todos, comparto mi codigo de ejemplo usando forEach :) ````js students.forEach((student) => { const divInput = document.createElement("div"); const nameStudent = document.createElement('h1'); const divSubject = document.createElement("ul"); nameStudent.textContent = `${student.name}`; student.workathome.forEach((subject) => { const textLi = document.createElement("li"); const textInput = document.createElement("input"); textInput.type = "checkbox"; textLi.textContent = `${subject}`; divSubject.appendChild(textLi); textLi.appendChild(textInput); }); divstudents.appendChild(divInput); divInput.appendChild(nameStudent); divInput.appendChild(divSubject); }); ```students.forEach((student) => { const divInput = document.createElement("div"); const nameStudent = document.createElement('h1'); const divSubject = document.createElement("ul"); nameStudent.textContent = `${student.name}`; student.workathome.forEach((subject) => { const textLi = document.createElement("li"); const textInput = document.createElement("input"); textInput.type = "checkbox"; textLi.textContent = `${subject}`; divSubject.appendChild(textLi); textLi.appendChild(textInput); }); divstudents.appendChild(divInput); divInput.appendChild(nameStudent); divInput.appendChild(divSubject);}); ````
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div id="app"></div>
        <script>
    
            const app = document.getElementById("app")
            const tareas = [
                {tarea :"caminar"},
                {tarea :"correr"},
                {tarea :"nadar"},
                {tarea :"comer"}
            ]
    
            tareas.forEach(tarea => {
                app.innerHTML += `<li> ${tarea.tarea} <input type="checkbox">  </li>`        })
    
        </script>
        
    </body>
    </html>
    

    mientras menos operaciones hagamos directamente en el DOM mejoraremos nuestro performance debido a que el motor V8 trabajar eficientemente con arreglos que con NodeList.
    Ademas trabajar con innerHTML provoca brechas de seguridad; lo recomendable es usar Fragment para hacer una sola carga en el DOM e innerText, de esta manera estamos aplicando buenas practicas.

    Mi soluci贸n al reto:

    		<script>
    			const tareas = [
    				{
    					name: "Terminar el curso",
    					checked: false,
    					description: "Manipulacion de arrays con JS",
    				},
    				{
    					name: "Comprar la comida de mis gatas",
    					checked: true,
    					description: "Tigresa, Kitty, Niebla,Zoe y Bagui",
    				},
    				{
    					name: "Arreglar la bici",
    					checked: false,
    					description: "Le fallan los pedales",
    				},
    			];
    			const container = document.getElementById("container");
    			const createTask = (name, status, description) => {
    				const task = document.createElement("div");
    				if (status) {
    					const content = `
              <div style="display:flex">
                <input type="checkbox" checked>
                <h2>${name}</h2>
              </div>
              <div>
                <p>${description}</p>
              </div>
            `;
    					task.innerHTML = content;
    					return task;
    				} else {
    					const content = `
              <div style="display:flex">
                <input type="checkbox">
                <h2>${name}</h2>
              </div>
              <div>
                <p>${description}</p>
              </div>
            `;
    					task.innerHTML = content;
    					return task;
    				}
    			};
    			tareas.forEach((tarea) => {
    				const newTask = createTask(
    					tarea.name,
    					tarea.checked,
    					tarea.description
    				);
    				container.appendChild(newTask);
    			});
    		</script>
    	</body>
    </html>
    
    
    Reto resuelto ```js const tasks = [ {name:'Completar reto', status:true}, {name:'Terminar tarea', status:false}, {name:'Dar de comer a blanca', status:true}, {name:'Limpiar casa', status:false} ] const app = document.getElementById('app'); // Imprimiendo un objeto con for each products.forEach(product =>{ app.innerHTML += `
  • ${product.title} - ${product.price}
  • ` }) const daily = document.getElementById('daily') tasks.forEach(task =>[ daily.innerHTML += `
  • ${task.name} - <input type="checkbox" ${task.status ? 'checked' : false}>
  • ` ]) ```聽 聽 const tasks = \[聽 聽 聽 聽 聽 聽 聽 聽 {name:'Completar reto', status:true},聽 聽 聽 聽 聽 聽 聽 聽 {name:'Terminar tarea', status:false},聽 聽 聽 聽 聽 聽 聽 聽 {name:'Dar de comer a blanca', status:true},聽 聽 聽 聽 聽 聽 聽 聽 {name:'Limpiar casa', status:false}聽 聽 聽 聽 聽 聽 ] 聽 聽 聽 聽 聽 聽 const app = document.getElementById('app');聽 聽 聽 聽 聽 聽 *// Imprimiendo un objeto con for each*聽 聽 聽 聽 聽 聽 products.forEach(product =>{聽 聽 聽 聽 聽 聽 聽 聽 app.innerHTML += `\
  • ${product.title} - ${product.price}\
  • `聽 聽 聽 聽 聽 聽 }) 聽 聽 聽 聽 聽 聽 const daily = document.getElementById('daily')聽 聽 聽 聽 聽 聽 tasks.forEach(task =>\[聽 聽 聽 聽 聽 聽 聽 聽 daily.innerHTML += `\
  • ${task.name} 聽- \<input type="checkbox" ${task.status ? 'checked' : false}> \
  • `聽 聽 聽 聽 聽 聽 ])
    Hola les dejo mi solucion ```js const app = document.getElementById('app'); const listTask = document.createElement('ul'); app.append(listTask); const addItem = (task) => { const taskItem = document.createElement('li'); const taskIscomplete = document.createElement('input'); taskIscomplete.type = "checkbox"; taskIscomplete.checked = task.isComplete; taskItem.innerText = `${task.task}`; taskItem.append(taskIscomplete); return taskItem }; const listTaskContent = [ { task:"Levantarse", description:"pendiente de las tareas pendientes", isComplete:true }, { task:"Comprar Aguacates", description:"Mirar que esten en buen estado", isComplete:false }, { task:"Comprar Papas", description:"Revisar que esten lo mas frescas posibles", isComplete:false }, { task:"Cocinar una salsa de aguacate con papas", description:"Con los ingredientes revisar como poder mejorar la receta", isComplete:false }, ]; listTaskContent.forEach( task => listTask.append(addItem(task)) ); ```

    Buen dia compa帽eros este es mi aporte y si tienen alguna duda no duden en dejarla en los comentarios para ayudarlos.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            const works = [
                {title: 'Study Programming', status: 'Incomplete'},
                {title: 'Work in Delivery', status: 'Incomplete'},
                {title: 'Study English', status: 'Incomplete'},
                {title: 'See mu series', status: 'Incomplete'},
            ];
            const app = document.getElementById('app');
            works.forEach(work => {
                const listItem = document.createElement('li');
                listItem.innerHTML = `${work.title} - <span>${work.status}</span>`;
    
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.checked = work.status === 'Complete';
    
                checkbox.addEventListener('change', () => {
                    work.status = checkbox.checked ? 'Complete' : 'Incomplete';
                    listItem.querySelector('span').textContent = work.status;
                });
    
                listItem.appendChild(checkbox);
                app.appendChild(listItem);
            });
    
        </script>
    </body>
    </html>
    
    Una pregunta cuando utilizo el insertAdjacentHTML en el ejercicio no se ve nada en el HTML cuando ejecuto npx http-server client/ Pero puedo visualizar el resultado cuando utilizo el live server de visual studio code ???

    Mi soluci贸n:)

    <div id="app"></div>
        <script>
            const toDo = [ //arrays
                {task: "Homework University", status: ""},//object
                {task: "Class English", status: ""},
                {task: "Class Platzi", status: ""},
                {task: "Practice JavaScript", status: ""},
            ];
    
            const app = document.getElementById("app");
            toDo.forEach(toDoList => {
                app.innerHTML +=`<li>${toDoList.status} <input type="checkbox"> ${toDoList.task}</li>`;
            });
        </script>
    

    Aca esta mi soluci贸n al reto:
    CODIGO JS

    const tareas = [
      { name: "Despertarse", estado: true },
      { name: "Estudiar", estado: true },
      { name: "Trabajar", estado: true },
      { name: "Estudiar x2", estado: false },
      { name: "Dormir", estado: false },
    ];
    
    const lista = document.querySelector("#listaDeTareas");
    
    tareas.forEach((tarea) => {
      const liElement = document.createElement("li");
      liElement.innerHTML = tarea.name;
    
      const inputElement = document.createElement("input");
      inputElement.type = "checkbox";
      if (tarea.estado == true) {
        inputElement.checked = true;
      }
    
      lista.appendChild(liElement);
      liElement.appendChild(inputElement);
    });
    

    CODIGO HTML

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Desafio forEach</title>
      </head>
      <body>
        <header>
          <nav>
            <p>desafio</p>
          </nav>
        </header>
        <main>
          <h1>LISTA DE TAREAS</h1>
          <ul id="listaDeTareas"></ul>
        </main>
        <script src="./index.js"></script>
      </body>
    </html>
    

    Mi respectiva soluci贸n al reto final de la clase:

    const tareas = 
    [
        {nombre: "Ingles", estado: "incompleta"},
        {nombre: "Literatura", estado: "completa"},
        {nombre: "Sociales", estado: "completa"}
    ]
    
    const app = document.querySelector("#app");
    tareas.forEach(tarea => {
        app.innerHTML += `<li >${tarea.nombre} - ${tarea.estado} <input type="checkbox" ${tarea.estado === 'completa' ? 'checked' : ''}> </li>`;
    });
    

    Mi soluci贸n al reto, estamos poco a poco aprendiendo as铆 que quiz谩s no es mucho pero me estoy esforzando.

    const activities = [
                { name: '脕ctivity1', description: 'Make ice cream', ready: 'checked' },
                { name: '脕ctivity2', description: 'Cook pastel', ready: 'checked' },
                { name: '脕ctivity3', description: 'Make the dinner', ready: '' },
                { name: '脕ctivity4', description: 'Drink water', ready: 'checked' },
                { name: '脕ctivity5', description: 'Go to class', ready: '' },
            ];
            const app = document.getElementById('app');
            activities.forEach(activity => {
                app.innerHTML += `<li>
                                    <input id="${activity.name}" name="${activity.name}" type="checkbox" ${activity.ready}>
                                    ${activity.description}
                                </li>`;
            })
    

    Ejercicio solucionado !!!
    Codigo

    Render

    Ac谩 les dejo mi soluci贸n al reto 馃挌:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app"></div>
      <div id="tasks"></div>
      <script>
        // Mostrar elementos de un array al usuario
        const products = [ 
          {title: 'Burger', price: 121},
          {title: 'Pizza', price: 20}
        ];
        const app = document.getElementById('app');
        products.forEach(product => {
          app.innerHTML += `<li>${product.title} --> $${product.price}</li>`
        });
    
        // Mostrar elementos CheckBox de un array al usuario
        const tasks = [ 
          {title: 'Wash dishes', completed: true},
          {title: 'Cook dinner', completed: false},
          {title: 'Walk the dog', completed: true},
          {title: 'Brush my teeth', completed: false},
          {title: 'Do my homework', completed: true}
        ];
        const task = document.getElementById('tasks');
        tasks.forEach(item => {
          task.innerHTML += `
            <p>
              <input type="checkbox" id="${item.title}" ${item.completed && 'checked'}>
              ${item.title}
            </p>`
        });
      </script>
    </body>
    </html>
    

    mi aporte

    const tasks = [
              {content: 'Learn array manipulation', state: true},
              {content: 'Learn React', state: false},
              {content: 'Learn Tailwind', state: true},
              {content: 'Move the little hands', state: false},
            ]
            // creamos una veriable con let y dentro creamos una lista desordenada
            let nodes = document.createElement('ul');
            // Seleccionamos el contenedor por su id 'App'
            const app = document.getElementById('App');
            // hacemos un forEach y creamos una lista por cada elemento del array con un check inicializado con un booleano
            // al final envolvemos todo en un label para hacer click en cualquier parte del parrafo y marcar el check
            tasks.forEach(tasks => {
              const element =
              `<li>
                <label>
                  <input type="checkbox" ${tasks.state ? 'checked' : ''}/> 
                ${tasks.content}
                <label/>
              </li>`
              // cambiamos el valor del elemento asignandole el resultado por cada vuelta de for y lo insertamos al html
              nodes.innerHTML += element
            })
            // insertamos el array de objetos en el contenedor y lo renderizamos al html para que se muestre la info 
            App.append(nodes)
    

    Aqu铆 dejo mi c贸digo

    
    

    <code>

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div> 
        <script>
            const tasks = [
                { task: 'Washing my clothes', status: true },
                { task: 'Cleaning my room', status: false },
                { task: 'Cooking the lunch', status: true },
                { task: 'Fixing my motorcycle', status: false },
                { task: 'Studing to the exam', status: true },
                { task: 'Go to the job', status: true }
            ];
            const app = document.getElementById('app');
            tasks.forEach(task => {
                app.innerHTML += `<li>${task.task} - ${task.status}</li>`;
            })
        </script>
    </body>
    </html>
    

    Mi solucion:

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tasks</title>
    </head>
    <body>
    
        <main>
    
            <div id="app">
    
            </div>
    
        </main>
    
        <script>
    
            const tareas = [
                {
                    title: 'Tarea 1',
                    descripcion: 'Crear un ejemplo de tarea.',
                    completada: true
                },
                {
                    title: 'Tarea 2',
                    descripcion: 'Ir por tortillas a la tienda.',
                    completada: false
                },
                {
                    title: 'Tarea 3',
                    descripcion: 'Descripcion tarea 3.',
                    completada: true
                }
            ];
    
            const app = document.querySelector('#app');
    
            tareas.forEach(tarea => {
                app.innerHTML += (`
    
                                    <div>
                                        <h3>${tarea.title}</h3>
                                        <p>${tarea.descripcion}</p>
                                        <input type='checkbox' ${tarea.completada != false ? 'checked' : ''} >
                                    </div>
                
                `)
            });
    
        </script>
    </body>
    </html>
    

    Hice que el estado de la tarea se encontrara en un div al lado, que cambia cada que el checkbox de la tarea es seleccionado.

    Si no saben ingl茅s, no sean chismosos y no traduzcan mis tareas.

    <body>
        <div id="app"></div>
        <script>
            const tasks = [{
                    description: 'Do homework',
                    status: 'in progress'
                },
                {
                    description: 'P with myself',
                    status: 'in progress'
                },
                {
                    description: 'meet with friends',
                    status: 'In progress'
                },
                {
                    description: 'P with myself',
                    status: 'in progress'
                },
                {
                    description: 'P with myself',
                    status: 'in progress'
                },
                {
                    description: 'P with myself',
                    status: 'in progress'
                },
    
            ];
            const app = document.getElementById('app');
            tasks.forEach((task, index) => {
                app.innerHTML +=
                    `<div class="checkbox-container"><label class="task"><input class="checkbox" id="checkbox-${index}" type="checkbox"></label> ${task.description} - <div style="display:inline" class="status">${task.status}</div> </div> `;
            });
            const container = document.querySelector('#app');
    
            container.addEventListener('click',(e)=>{
                if(e.target.classList.contains('checkbox')){
                    const status = e.target.parentElement.parentElement.querySelector('.status');
                    if(e.target.checked){
                        status.textContent = 'Done';
                    }
                    else if(!(e.target.checked)){
                        status.textContent = 'In progress';
                    }
                }
            })
        </script>
    </body>
    

    La tarea me la avent茅 haciendo que los checkbox hagan que cambie el div con clase status a la derecha de cada tarea.
    Igual y le dediqu茅 m谩s tiempo del que deber铆a.

    <body>
        <div id="app"></div>
        <script>
            const tasks = [{
                    description: 'Do homework',
                    status: 'in progress'
                },
                {
                    description: 'whack off',
                    status: 'in progress'
                },
                {
                    description: 'meet with friends',
                    status: 'In progress'
                },
                {
                    description: 'whack off',
                    status: 'in progress'
                },
                {
                    description: 'whack off',
                    status: 'in progress'
                },
                {
                    description: 'whack off',
                    status: 'in progress'
                },
    
            ];
            const app = document.getElementById('app');
            tasks.forEach((task, index) => {
                app.innerHTML +=
                    `<div class="checkbox-container"><label class="task"><input class="checkbox" id="checkbox-${index}" type="checkbox"></label> ${task.description} - <div style="display:inline" class="status">${task.status}</div> </div> `;
            });
            const container = document.querySelector('#app');
    
            container.addEventListener('click',(e)=>{
                if(e.target.classList.contains('checkbox')){
                    const status = e.target.parentElement.parentElement.querySelector('.status');
                    if(e.target.checked){
                        status.textContent = 'Done';
                    }
                    else if(!(e.target.checked)){
                        status.textContent = 'In progress';
                    }
                }
            })
        </script>
    </body> 
    

    SOLUCION TAREA

    HTML

    <div id="app"></div>
    

    JavaScript

    const container = document.getElementById('app');//Creamos una const para app
    
    const tareas = [//creamos un array con la lista de tareas
      { title: 'Limpieza',  task:'Barrer, trapear, sacudir'},
      { title: 'Mascota', task:'Sacar a pasear, limpiar arenero, lavar recipientes'},
      { title: 'Cocina', task:'Comprar el mercado, lavar frutas y verduras y almacenarlas'},
      { title: 'Trabajo', task:'Terminar los pendientes para el luner, enviar correos'},
      { title: 'Familia', task:'Llamar a la tia'},
    
    ]
    
    tareas.forEach(tarea => {// por cada tarea
      app.innerHTML += `<label><input type="checkbox">${tarea.title}: ${tarea.task}</label><br>`//que entre a el html y ponga un checkbox con el titutilo y la tarea
    })
    

    Con el siguiente c贸digo colocamos una condicion para que nos muestre dependiendo de si esta completada la tarea o no nos muestre un check o una x .

       const task = [
      { title: 'Terminar curso de manipulaci贸n de arrays', completed: false },
      { title: 'Terminar curso definitivo de HTML y CSS', completed: true },
      { title: 'Lavar el ba帽o', completed: false },
      { title: 'Crear mi p谩gina web', completed: true }
    ];
    
    task.forEach(task => {
      const status = task.completed ? '鉁' : '鉂';
      app.innerHTML += `<li>${task.title} - ${status} </li>`;
    });
    
    
    
    

    Bueno esta fue mi soluci贸n al reto

    const app = document.getElementById('app');
    
    const tareas = [
        {validado : 'r',tarea : 'Bases de Datos'},
        {validado : 'r',tarea : 'Algebra Lineal'},
        {validado : 'r',tarea : 'Seguridad Informatica'},
        {validado : 'r',tarea : 'Ingles'},
    ];
    
    tareas.forEach(tarea => {
    
    console.log(tarea.validado + " " + tarea.tarea )
    
    app.innerHTML += `<li> <input type="checkbox" name="rata" id=""> ${tarea.validado} ${tarea.tarea} </li>`
    });
    

    Este es mi Lista de tareas, le agregu茅 esa decoraci贸n al tachar 馃憖. Puedes marcar la 煤ltima tarea aqu铆 en CodePen.
    .

    .
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    
      <!-- Google Font - Rubik https://fonts.google.com/specimen/Rubik-->
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
    
      <style>
        * {font-family: Rubik;}
    
        .done-true {
          text-decoration:line-through;
        }
      </style>
    </head>
    <body>
      <h1>TO-DO</h1>
      <div id="todo_list"></div>
    
      <script>
        tasks = [
          {done: true, title: "Programar c贸digo inicial para el ejercicio"},
          {done: true, title: "Agregar evento para tachar texto"},
          {done: true, title: "Cambiar fuente de texto"},
          {done: true, title: "Publicarlo en APORTES"},
          {done: false, title: "Que alguien tache la 煤ltima tarea"}
        ]
    
        todoList = document.getElementById('todo_list');
    
        tasks.forEach( (task, index) => {
          let checkbox = '';
          let label = '';
    
          todoList.innerHTML += 
            `<div>
              <label id="lbl_task_${index}" class="done-${task.done}">
                <input id="chk_task_${index}" type="checkbox"/>
                ${task.title}
              </label>
            </div>`;
        });
    
        // Marcar tareas completadas
        tasks.forEach( (task, index) => {
          checkbox = document.getElementById(`chk_task_${index}`);
          checkbox.checked = task.done;
        });
    
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    
        // Evento para marcar / desmarcar
        function eventCheck(checkbox) {
          checkbox.addEventListener('change', () => {
            const label = checkbox.parentNode; // Elemento padre (label)
    
            if (checkbox.checked) {
              label.classList.remove('done-false');
              label.classList.add('done-true');
            } else {
              label.classList.remove('done-true');
              label.classList.add('done-false');
            }
          });
        }
    
        // Recorrer cada checkbox y adjuntar evento
        checkboxes.forEach(eventCheck);
    
      </script>
    </body>
    </html>
    

    Este es mi respuesta al ejercicio propuesto 馃槂

    <script>
        const tasks = [
          {title:'read a book', done: false},
          {title:'listen music', done: true},
          {title:'watch a film', done: false},
        ]
    
        const app = document.getElementById('app');
    
        tasks.forEach((task, index) =>{
          app.innerHTML += `
            <input type="checkbox" id="${index}" name="${task.title}" value="${task.title}" ${task.done && 'checked'}>
            <label for="${task.title}">${task.title}</label><br>`
        })
      </script>
    

    Lo hice igual al ejercicio de la clase y me funcion贸

    const tasks = [
                {task: 'estudiar', estado: 'checked'},
                {task: 'ordenar', estado: 'checked'},
                {task: 'comer', estado: ''},
            ];
            const lista = document.getElementById('lista-tareas');
            tasks.forEach(item => {
                lista.innerHTML += `<li><input type="checkbox" ${item.estado}>${item.task}</input></li>`;
            })
    
    <div id="tasks"></div>
        <script>
            const tasks = [
                {id: 'Task1', name:'Elaboraci贸n de requisitos funcionales', estate:true},
                {id: 'Task2', name:'Elaboraci贸n de diagramas UML', estate:true},
                {id: 'Task3', name:'Elaboraci贸n de esquema de base de datos', estate:false},
                {id: 'Task4', name:'Elaboraci贸n de capa de modelos', estate:false},
                {id: 'Task5', name:'Elaboraci贸n de capa de controladores', estate:true},
                {id: 'Task6', name:'Elaboraci贸n de capa de vistas', estate:false},
            ];
            const divTask = document.getElementById('tasks');
            tasks.forEach(task => {
                divTask.innerHTML += 
                `<li>
                    <input
                        type='checkbox'
                        id='${task.id}'
                        name='${task.name}'
                        ${task.estate?'checked':''}
                    />
                    <label for='${task.name}' >${task.name} 
                    </label>
                    
                </li>`;
            })
        </script>
    

    Aqui esta mi soluci贸n al ejercicio propuesto:

    				const tasks = [
                {title: 'Sacar al perro', state: 'completed'},
                {title: 'Regar las plantas', state: 'uncompleted'},
                {title: 'Lavar los platos', state: 'uncompleted'},
                {title: 'Estudiar programaci贸n', state: 'completed'},
                {title: 'Ir al gimnasio', state: 'completed'}
            ]
    
            const node = document.createElement('ol');
            const formu = document.getElementById('formulario')
    
            tasks.forEach(task => {
                let input = document.createElement('li');
    
                if(task.state === 'completed'){
                    input.innerHTML = `
                        <label>
                            <span>${task.title}</span>
                            <input type="checkbox"  checked />
                        </label>
                    `;
                }
                else {
                    input.innerHTML = `
                        <label>
                            <span>${task.title}</span>
                            <input type="checkbox" />
                        </label>
                    `;
                }
    
                node.append(input);
            })
    
            formu.append(node);
    

    Mi Soluci贸n

    Reto completo 馃槂 : Para mejorar la performance de carga, como lo menciono Samuel Alvarez (el mas votado), no inclui llamar al input dentro del foreach

            //mostraremos una lista de tareas y su status
            const tasks = [
                {title: 'hacer desayuno', status: true},
                {title: 'ba帽arse', status: true},
                {title: 'limpiar casa', status: false},
                {title: 'tareas de la UNI', status: false}
            ]
            let mostrar = ""
            
            const app = document.querySelector('#app') 
    
            tasks.forEach(({title,status}) => {
                mostrar += `<label>${title}</label>
                <input type="checkbox" name="" id="" ${status?'checked':''}><br>`
            })
    
            app.innerHTML = mostrar
    

    Este es el resultado de mi reto:

    const todoList = [
        { id: 01, content: 'Comprar ingredientes para hacer galletas', status: true, emoji: '馃洅' },
        { id: 02, content: 'Hacer galletas', status: false, emoji: '馃崻' },
        { id: 03, content: 'Vender galletas', status: false, emoji: '馃こ' },
        { id: 04, content: 'Contabilizar ganancias de galletas vendidas', status: false, emoji: '馃' },
    ];
    const app = document.getElementById('app');
    
    todoList.forEach(item => {
        app.innerHTML += `
            <li id=${item.id}><input type="checkbox" ${item.status ? 'checked' : ''}  />${item.content} ${item.emoji}</li>
        `    
    });
    

    Mi respuesta al reto:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Curso de manipulaci贸n de arrays con JS</title>
    </head>
    <body>
        <h2>Lista de tareas </h2>
        <hr>
        <div id="tasks"></div>
        <script>
            const tareas = [
                { title: 'Estudiar en Platzi', done: true },
                { title: 'Hacer ejercicio', done: false },
                { title: 'Tomar agua', done: true },
                { title: 'Pasear al perro', done: false },
            ];
            const tasks = document.getElementById('tasks');
            tareas.forEach(task => {
                tasks.innerHTML +=  `<li>${task.title} <input type="checkbox" ${task.done ? 'checked': ''}/></li>`;
            });
        </script>
    </body>
    </html>
    

    Aqu铆 va como lo resolv铆

    <        const checkbox = [
                {tarea: 'Despertar'},
                {tarea: 'Hacer la tarea'},
                {tarea: 'Dormir'},
                {tarea: 'Ver T.V.'},
            ];
    
            const toDoList = document.getElementById('toDoList');
            checkbox.forEach(checkbox => {
                toDoList.innerHTML += `<li> <input type="checkbox"> ${checkbox.tarea}  </li>`;
            });> 
    
    Solucion al reto con js y manipulacion del dom
    
    let todos = [{
        content: 'Ir al gimnasio,
        completed: true,
    },{
        content: 'ir al parque',
        completed: false
    },{
        content: 'Ir al cine',
        completed: true
    }]
    
    let app = document.getElementById('app')
    
    let createNodeTag = (tag,attrs,content) => {
        let element = document.createElement(tag)
    
        if(attrs){
            element.setAttribute(attrs.nameAttr,attrs.valueAttr)
        }
    
        if(content){
            let text = document.createTextNode(content)
            element.appendChild(text)
        }
    
        return element
    }
    
    let todoList = createNodeTag('ul')
    app.appendChild(todoList)
    
    
    todos.map(todo => {
        console.log(todo.content)
        let list = createNodeTag('li',null,todo.content)
        let checkBox = createNodeTag('input',{nameAttr:'type',valueAttr:'checkbox'})
    
        todo.completed ? checkBox.setAttribute("checked",""): ""
    
        list.appendChild(checkBox)
        todoList.appendChild(list)
    })
    
    

    Le agregue un css super sencillo:

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../css/styles.css">
    </head>
    <body>
        <h1 class="title">Lista de Tareas</h1>
        <div id="app"></div>
        <div class="container">
            <div id="tasks"></div>
        </div>
        <script src="../server/tasks.js"></script>
        </script>
    </body>
    </html>
    

    CSS

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    
    html {
        font-size: 62.5%;
    }
    
    .title {
        text-align: center;
        margin-top: 20px;
        font-size: 4rem;
        color: green;
    }
    
    .container {
        width: 300px;
        height: auto;
        border: 2px solid black;
        margin: 0 auto;
        padding: 10px;
        line-height: 40px;
        font-size: 2rem;
    }
    .list {
        display: flex;
        align-items: center;
    }
    
    .check {
       margin-right: 8px;
       width: 16px;
       height: 16px;
    }
    

    JAVASCRIPT

    const task = document.getElementById("tasks");
    
    const tasks = [
        {name: 'Ir al supermercado'},
        {name: 'Ir a la lavanderia'},
        {name: 'Sacar al perro a pasear'},
        {name: 'Ir al gym'},
        {name: 'Preparar el almuerzo'},
    ];
    
    tasks.forEach(tarea => {
        task.innerHTML += `<li class="list">  <input class="check" type="checkbox"><p> ${tarea.name} </p> </li>` ;
    });
    

    Les comparto mi soluci贸n al reto planteado:

    archivo.html

    <body>
      <h1>Reto forEach</h1>
      <div id="reto"></div>
    </body>
    

    archivo.js

    const tareas = [
          {
            tar: 'Revisar la agenda',
            descripcion: 'Siempre ver agenda del d铆a, d铆a anterior y ver dos d铆as posteriores.',
            status: true,
          },
          {
            tar: 'Regar las plantas',
            descripcion: 'Comenzar por las que est谩n en el frente de la casa y continuar por las del patio.',
            status: true,
          },
          {
            tar: 'Ir al gimnasio',
            descripcion: 'Ir al gyn de 16 a 17 horas.',
            status: true,
          },
        ];
        let nodo = document.createElement('ul');
        const reto = document.getElementById('reto');
        tareas.forEach(tareas => {
          const element = `
          <li>
            <input type="checkbox" ${tareas.status ? 'checked' : ''}>
            ${tareas.tar} - ${tareas.descripcion}
          </li>`;
          nodo.innerHTML += element;
        });
        reto.append(nodo);
    

    Excelente curso!! Nunca pares de aprender!!

    Aqu铆 dejo mi soluci贸n 
    
     <div id="app"></div>
    
        <script>
            const tasks = [
                {
                    tarea:"Pasear al perro",
                    done:true
                },
                {
                    tarea:"Hacer ejercicio",
                    done:false
                },
                {
                    tarea:"Estudiar javascript",
                    done:true
                },
                {
                    tarea:"Hacer ejercicio",
                    done:false
                },
            ]
                const app = document.getElementById('app');
                
                tasks.forEach(task => {
                    
                    app.innerHTML += `<li>${task.tarea} - <input type="checkbox" ${task.done? "checked" : " "}></li>`
                    
                    
                    
                });
    
    

    mi soluci贸n :

    Mi ejercicio, espero sea de ayuda para alguno

        let insertar = [];
        tasks.forEach(({title,status}) => {
    
            const element = `
            <li> ${title}: <input type="checkbox" ${status ? 'checked' : ""}>  - 
            ${status ? 'Well Done' : 'Do it. Now'}
                
            </li>
            `
            insertar.push(element)
            
        })
        app.innerHTML += insertar.join('')
    

    Esto es la soluci贸n a mi reto.

    const reto = document.getElementById("reto");
      reto.innerHTML = "<ul>";
      const tareas = [
        {name: "matematicas", done: true},
        {name: "estadistica", done: true},
        {name: "comer", done: false},
        {name: "dormir", done: false},
        {name: "ajedrez", done: false},
        {name: "javascript", done: true}
      ];
      tareas.forEach(tarea => {
        reto.innerHTML += `<li>${tarea.name} - <input type="checkbox" ${tarea.done ? "checked" : null}></li>`
      });
    
      reto.innerHTML += "</ul>";
    

    Yo inclu铆 otro forEach para que el texto de Complete y Pending cambie si le damos check a la casilla

    const introBarurini = [
                { title: 'Illustration', status: 'Complete', done: true },
                { title: 'After Effects Structure', status: 'Complete', done: true },
                { title: 'Rigging', status: 'Complete', done: true },
                { title: 'Animation_Preview', status: 'Pending', done: false },
                { title: 'Animation_Finale', status: 'Pending', done: false },
            ];
    
            const checkList = document.getElementById('taskList');
            introBarurini.forEach((task,index) => {
                const taskRow = document.createElement('li');
                const textTaskName = document.createTextNode(
                    `0${index}- ${task.title}`
                    );
    
                const statusRow = document.createElement('span');
                statusRow.innerHTML = ` - ${task.status}`;
                statusRow.setAttribute('id', `status0${index}`)
    
                const checkboxRow = document.createElement('input');
                checkboxRow.setAttribute('type', 'checkbox');
                checkboxRow.checked = task.done;
                
    
                taskRow.append(
                    checkboxRow,
                    textTaskName,
                    statusRow);
                checkList.appendChild(taskRow);
            });
    
            const checkBoxes = checkList.querySelectorAll('input[type="checkbox"]');
    
            checkBoxes.forEach((checkbox) => {
                checkbox.addEventListener('click', function() {
                    const status = checkbox.nextElementSibling;
                    checkbox.checked
                    ? status.innerHTML = ' - Completed'
                    : status.innerHTML = ' - Pending';
                })
            });
    

    Mi reto 馃:

    const tasksContainer = document.querySelector('.tasks');
            const task = document.createElement('ul');
            task.classList.add('task_container');
            tasksContainer.append(task);
    
            const taskList =[{
                value:'Hacer un html'
            },
            {
                value:'Escribir un libro'
            },
            {
                value:'Crear un sistema operativo'
            }]
    
            taskList.forEach(item=>{
                const list = document.createElement('li');
                const checkbox = document.createElement('input');
                checkbox.setAttribute('type','checkbox');
                checkbox.classList.add('task');
    
                const value = document.createElement('label');
                value.setAttribute('for','task');
                value.innerText = item.value;
                list.append(checkbox,value)
    
                task.append(list)
            })
    

    Mi soluci贸n al reto planteado.

        <script>
            const  products = [
                {title: 'Limpiar', state: true},
                {title: 'Dormir', state: true},
                {title: 'Bailar', state: false}
            ];
            const app = document.getElementById('app');
            products.forEach((item, index, arr) => {
                app.innerHTML += `<li>Tarea: ${item.title} - Estado: <input type="checkbox" ${(item.state)?"checked":""}></li>`;
            });
        </script>
    

    Saludos
    aqu铆 dejo mi soluci贸n al reto propuesto

        <div id="app"></div>
        <script>
            const tasks = [
                { name: 'Task 1',  done: true,  advance: '100%' },
                { name: 'Task 2',  done: true, advance: '100%' },
                { name: 'Task 3',  done: true,  advance: '100%' },
                { name: 'Task 4',  done: false, advance: '10%' },
                { name: 'Task 5',  done: false,  advance: '20%' },
                { name: 'Task 6',  done: false, advance: '80%' },
                { name: 'Task 7',  done: true,  advance: '100%' },
                { name: 'Task 8',  done: false, advance: '50%' },
                { name: 'Task 9',  done: true,  advance: '100%' },
                { name: 'Task 10', done: false, advance: '20%' },
            ];
    
            const app = document.getElementById('app');
            tasks.forEach(task => {
                app.innerHTML += `<li><label> <strong>Nombre tarea:</strong> ${task.name} - <strong>Porcentaje de avance:</strong> ${task.advance}</strong> <strong>驴Complegtada?:</strong> <input type="checkbox" ${task.done ? 'checked' : ''}/> </li>`;
            });
        </script>
    

    Este fue mi codigo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exercise</title>
    </head>
    <body>
        <div id="act">
           <script>
                
                 const tasks = [
                     {Activity:"Make the bed", Status:"Done",mark:true},
                     {Activity:"Exercise", Status:"Still no",mark:false},
                     {Activity:"Drink water", Status:"Done",mark:true},
                     {Activity:"Take a shower", Status:"Still no",mark:false},
                     {Activity:"clean house", Status:"Done",mark:true}
             ];
             const act = document.getElementById("act");
             tasks.forEach(task=>{
                 act.innerHTML += `<li>
                    ${task.Activity} || Description: ${task.Status} -
                    <input type="checkbox" ${task.mark ? "CHECKED": " "}>
            </li>`
             })
            </script>
        </div>
    </body>
    </html>
    

    Mi solucion:

    <div id="app"></div>
    
        
        <script>
            let app = document.getElementById('app');
    
            const tasks = [
                {title: 'Pasear al perro'},
                {title: 'Sacar la basura'},
                {title: 'Ser C1 en ingl茅s :)'},
                {title: 'Ser FullStack developer'},
            ];
    
            tasks.forEach(task =>{
                app.innerHTML += 
                `
                <input type="checkbox" id="tarea">
                <label for="tarea">${task.title}</label><br/>
                `
            })
    
        </script>