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 189

Preguntas 14

Ordenar por:

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

o inicia sesi贸n.

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

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.

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>

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:[email protected]&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

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>

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'});
        }

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:[email protected]&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>

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

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>

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>
      `
    });

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>

Esta es mi solucion al reto:

        const divTarea = document.getElementById("tareas")
        const tareas = [
            {descripcion: "Lavar platos", done: false},
            {descripcion: "Comer", done: true},
            {descripcion: "Cocinar", done: true},
            {descripcion: "Hacer la cama", done: false}
        ]

     tareas.forEach(tarea => {
            divTarea.innerHTML += `
                <li>
                    <input type="checkbox" name="${tarea.descripcion}" id="${tarea.descripcion}" ${tarea.done && "checked"}>
                    <label for="${tarea.descripcion}">${tarea.descripcion}</label>
                </li>
            `
        })	

Esta es la soluci贸n de 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="app"></div>
</body>
<script>
const tareas = [
    {
        name: 'Asear la casa',
        state: true,
    },
    {
        name: 'Hacer el Desayuno',
        state: false,
    },
    {
        name: 'Estudiar en Platzi',
        state: false,
    }
]

const app = document.getElementById('app');
tareas.forEach(tarea => {
    const validacion = (tarea.state) ? 'checked':'';
    app.innerHTML += `<div><input type="checkbox" ${validacion}/><label>${tarea.name}</label></div>`
})

</script>
</html>

Reto cumplido 馃槈

HTML

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

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


</body>

JS

const tasksList = [
    {
        title: "Tarea 1", 
        description: "Lorem ipsum dolor sit amet.",
        done: true
    },
    {
        title: "Tarea 2", 
        description: "Lorem ipsum dolor sit amet.",
        done: true
    },
    {
        title: "Tarea 3", 
        description: "Lorem ipsum dolor sit amet.",
        done: true
    },
    {
        title: "Tarea 4", 
        description: "Lorem ipsum dolor sit amet.",
        done: true
    },
]


const div = document.querySelector("#app")
let html = ""
tasksList.forEach( task => {
    html += `
    <label><input type="checkbox" ${task.done == true && 'checked'}>${task.title}: ${task.description}<br>
    `
})

div.innerHTML = html

la diferencia ademas de las lineas de codigo es el tiempo de ejecucion , prueben este codigo para que lo vean:

const letters = ['a','b','c','d','e','f'];

console.time('uno');
for (var i = 0; i < letters.length; i++) {
    const element = letters[i];
    console.log(element);
}
console.timeEnd('uno');
console.time('dos');
letters.forEach(function (letter) {
    console.log(letter);
})
console.timeEnd('dos');
console.time('tres');
letters.forEach((item)=>{console.log(item)});
console.timeEnd('tres');```

Les comparto mi soluci贸n del reto usando reduce y con botones para borrar los elementos:

https://filedn.com/lifwNOcrilRFAvqCvInrtRY/Platzi/Lista_de_compras_2023/index.html

let tasks = [
  { name: 'Lavar los Platos', priority: 'Hight' },
  { name: 'Leer un libro', priority: 'Low' },
  { name: 'Hacer ejercicio', priority: 'medium' },
  { name: 'Cocinar', priority: 'medium' },
];

const app = document.querySelector(".app");

function withArrayCopy(arr, callback) {
  let copy = [...arr];
  callback(copy);
  return copy;
}

function removeItem(index) {
  let newList = withArrayCopy(tasks, copy => copy.splice(index, 1))
  tasks = newList;
  main(tasks);
}

function addAllTasks(arr) {
  let addAll = arr.reduce((acc, task, index) => {
    acc += `<input type="checkbox" id="${index}">
            <label for="${index}">
                Tarea: ${task.name} --- Prioridad: ${task.priority}
            <label/>
        <button style= "width:50px;height:auto;text-align:center" onclick="removeItem(${index})">X</button>

        <br/>`;
    return acc;
  }, '');

  return addAll;
}

function main(arr) {
  let allTasks = addAllTasks(arr);
  app.innerHTML = '';
  app.innerHTML = allTasks;
}

main(tasks);

Aqui dejo mi solucion:

<!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>
    <h2>Array de Lista de Tareas</h2>
    <div id="app"></div>
    <script>
        const products = [
            {title: 'Ir al Banco', estado: true},
            {title: 'Ir al Gym', estado: false},
        ];
        const app = document.getElementById('app');
        products.forEach(product => {
            app.innerHTML += `<li>${product.title} - ${product.estado}</li>`;
        }); 
    </script>
</body>
</html>
const tasksSecction = document.querySelector('#tasks')


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

tasks.forEach(item => {
tasksSecction.innerHTML += `
<div id="taskCards">
            <h2 id="title">${item.title}</h2>
            
            <input id="check" type="checkbox" ${item.done === true ? 'checked' : '' }>
            <p id="description">${item.description}</p>
        </div>

`
})

me robe la lista de alguien por ah铆 XD

Aqu铆 mi soluci贸n:

<script>
    const activities = [
        {task: 'Ordenar mi habitaci贸n', completed: true},
        {task: 'Desayunar', completed: true},
        {task: 'Estudiar programaci贸n', completed: false},
        {task: 'Enviar correos', completed: false},
        {task: 'Subir reels', completed: true},
    ]

    const taskList = document.getElementById('taskList');
        
    activities.forEach(activity=>{
        taskList.innerHTML += `<li>${activity.task} <input type="checkbox" ${activity.completed ? 'checked' : ''}/> </li>`;
    })
</script>

Esta es mi soluci贸n, decid铆 agregarle que cuando se cambia el estado del elemento checkbox, cambie tambi茅n el valor de la propiedad done de cada una de las tareas:

//Div donde se renderizar谩n las tareas
const app = document.querySelector('#app');

//Array de tareas
const tasks = [
    {
        title: 'Programar',
        description: 'Lorem ipsum dolor sit amet.',
        done: false
    },
    {
        title: 'Estudiar',
        description: 'Lorem ipsum dolor sit amet.',
        done: true
    },
    {
        title: 'Lavar',
        description: 'Lorem ipsum dolor sit amet.',
        done: true
    },
    {
        title: 'Cocinar',
        description: 'Lorem ipsum dolor sit amet.',
        done: false
    }

tasks.forEach(task => {
    //Creando el elemento para ser renderizado
    const element = `
        <div>
            <label for="${task.title}"> ${task.title} </label>
            <input class="check" type="checkbox" id="${task.title}" name="${task.title}" ${task.done && "checked"}>
            <br>
            <p>${task.description}</p>
        </div>
    
    //Renderizando cada elemento
    app.insertAdjacentHTML('beforeend', element)

   //Cambiando el valor de la propiedad 'done' de la tarea segun el estado del checkbox
    const check = document.getElementById(`${task.title}`)
    check.addEventListener('click', () => {
        if(check.checked) {
            task.done = true;
        } else {
            task.done = false;
        }
    })
})

Diferencias de sintaxis en los tipos de fors

const letters = ['A','B','C','D','E','F'];

//For of
console.log('\n /**For of**/ \n');
for (const letter of letters) {
    console.log(letter);
}

// for in

console.log('\n /**For in**/ \n');
for (const letter in letters) {
    console.log(letters[letter]);
}

console.log('\n /**For Tradicional**/ \n');
for(let i = 0; i < letters.length; i++) {
    console.log(letters[i]);
}

console.log('\n /**For each**/ \n');
letters.forEach((letter) => console.log(letter))

Este es 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>Lista de Tareas</title>
</head>
<body>
    <h2>Lista de Tareas</h2>
    <div id="app"></div>
    <script>
        const tareas = [
            {titulo: 'Ir a la peluqueria', completada: false},
            {titulo: 'Hacer el almuerzo', completada: true},
            {titulo: 'Estudiar Ingles', completada: false},
            {titulo: 'Practicar manejor de arrays', completada: false}
        ]
        const app = document.getElementById('app')

        tareas.forEach(tarea => {
             app.innerHTML += `<li>${tarea.titulo}  -  <input type='checkbox' ${tarea.completada ? 'checked' : '' } />   </li>`
        });
    </script>
</body>
</html>

Esta fue mi soluci贸n

<<div id="tarea"></div>
    <script>
      const task = [
        {
          name: "Tarea 1",
          description: "Desc de la tarea 1",
          done: true,
        },
        {
          name: "Tarea 2",
          description: "Desc de la tarea 2",
          done: false,
        },
        {
          name: "Tarea 3",
          description: "Desc de la tarea 3",
          done: false,
        },
        {
          name: "Tarea 4",
          description: "Desc de la tarea 4",
          done: true,
        },
      ];
      const tarea = document.getElementById("tarea");
      task.forEach((tareita) => {
        tarea.innerHTML += `<li>${tareita.description} - ${tareita.name} - 
       <input type ="checkbox" 		 
        ${tareita.done ? "checked" : ""}/>
        </li>`;
      });
    </script>> 
<script>
          const toDo = [
            {task: 'Despertar 5 am', done: true},
            {task: 'Lavar ropa', done: true},
            {task: 'Completar pintura', done: false},
            {task: 'Entrenamiento hombros', done: true},
          ];

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

          toDo.forEach( ({task, done})=> {

            app.innerHTML+=` <li>  
                <input type="checkbox" id=${task} name=${task} ${done && 'checked' } />
                 ${task}
                 </li>`
            
          });
        </script> 

la forma como realice el ejercicio me ayudo a practicar ciertos conceptos.

    const tareas = [
            {name: "Matematicas", creditos: 3},
            {name: "Fisica", creditos: 2},
            {name: "Teoremas", creditos: 3}
        ]
        const task = document.getElementById("tarea");
        tareas.forEach(product =>{
            task.innerHTML += `
            Estado <input type="checkbox">   ${product.name} - ${product.creditos} <br>
            
            `;
        });

Esta fue mi forma de resolver el reto, cualquier cosa que sea buena idea cambiar h谩ganmelo saber, as铆 incorporo buenas practicas 馃槃

El link de codepen

<<!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 class="lista">

        <ol id="listaElementos">
            
        </ol>
        
    </div>


    <script>

        let tareas = [];
        const lista = document.querySelector("#listaElementos");
        var nTareas;




        var nTareas = prompt("Cuantas tareas desea realizar?")
        nTareas = parseInt(nTareas);


        for(let i = 0; i < nTareas; i++){
            console.log("entre");
            let nuevaTarea = prompt("Ingrese la nueva tarea");

            tareas.push({
                name: nuevaTarea,
                status: "Incompleto"});

        }
        console.log("mi array es " + tareas );
        tareas.forEach(tarea => {
            lista.innerHTML += `<li>${tarea.name} <label id="${tarea.name}">Est谩 ${tarea.status } <input type="checkbox" <input type="checkbox" onclick= " this.parentNode.classList.add('completado');  this.parentNode.innerHTML =  'Est谩 Completo';  "> </label> </li> `;
            
        });







    </script>

    <style>

        html{
            background-color: rgb(230, 220, 220);
        }
        body{

            display: flex;
            align-items: center;
            justify-items: center;
        }
        .lista{
            

            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 100%;


        }

        .completado{
            color: green;
        }

    </style>
</body>
</html>> 

Pueden usar Live Server para ejecutar su archivo HTML y ver cambios a tiempo real

Comparto mi soluci贸n

<body>
    <div id="app"></div>
    <script>
        const app = document.getElementById('app');
        const todos = [];
        todos.push({
            task:'Estudiar',
            complete:false,
        });
        todos.push({
            task:'Trabajar',
            complete:false,
        });
        app.innerHTML +='<ul>';
        todos.forEach(todo =>{
            app.innerHTML += `
                <li>
                    ${todo.task}
                    <input type="checkbox" id=" ${todo.task}"  ${todo.complete && "checked"}>
                </li>`;
        })
        app.innerHTML +='</ul>';


    </script>
</body>
<        const tareas= [
            {title: "hacer los deberes", Hecha:"no"},
            {title: "lavar la ropa", Hecha:"no"},
            {title: "pasear el perro", Hecha:"si"},
            {title: "ayudar en la casa", Hecha:"no"},
            {title: "ir a trabajar", Hecha:"si"},
        ]

        tareas.forEach(tarea=>{
            if (tarea.Hecha=="si"){
                reto.innerHTML += `<input type="checkbox" name="${tarea.title}" checked> <li> La tarea de ${tarea.title} ${tarea.Hecha} est谩 hecha.</li> `;
            }
            else{
                reto.innerHTML += `<input type="checkbox" name="${tarea.title} un"> <li> La tarea de ${tarea.title} ${tarea.Hecha} NO est谩 hecha.</li> `;
            }
        })> 

https://vegadelalyra.github.io/TODO-Delta/
Les comparto mi demo de todo list, hosteada en github pages. Tiene bugs con las tareas llamadas por el mismo nombre pero con tiempo lo reparo. Si quieren im谩genes del c贸digo fuente (que es un poco caos), me comentan.

Reto de la clase

const products= [
    {name: 'pizza', price: 38},
    {name: 'burger', price: 22},
    {name: 'HotDog', price: 22},
    {name: 'Chiken Tenders', price: 28},
]

const app = document.querySelector('#app')

products.forEach((product) => {
    app.innerHTML += `<li>El producto es: ${product.name} S/.${product.price}</li>`
})

// Reto de Tareas
//Hay que hacer una lista de tareas, las cuales deben renderizarse en HTML
//para ello debemos usar un forEach y mostrar un checkBox si la tarea esta completada

const tasks = [
    {task: 'Hacer desayuno', time: 30, status: true},
    {task: 'Pasear la mascota', time: 30, status: true},
    {task: 'Preparar Cafe', time: 10, status: true},
    {task: 'Lectura del dia', time: 20, status: true},
    {task: 'Revisar Pendientes', time: 10, status: true},
    {task: 'Estudiar', time: 120, status: false},
    {task: 'Practicar leccion dia anterior', time: 40, status: false},
    {task: 'brerak', time: 15, status: true},
    {task: 'Revisar Codigo', time: 60, status: true},
    {task: 'Feedback', time: 30, status: true},
    {task: 'Preparar almuerzo', time: 45, status: false},
    {task: 'almorzar', time: 20, status: false},
]

const reto = document.querySelector('#reto')

tasks.forEach(({task,time,status})=>{

    let render = `
        <li>
        <input type='checkbox' id='${task}' name='${task}' ${status && 'checked'}/>
        <label for='${task}'>${task} requiere ${time}min</label><br>
        </li>
    `

    reto.innerHTML += render
})

Bueno, terminado el reto, lo dej茅 super simple:

const app = document.querySelector('#app');
app.style = 'display:grid';
const toDo = ['Sacar el perro', 'Hacer ejercicio', 'Estudiar', 'Ir al Banco'];

toDo.forEach(item => {
    const input = document.createElement('input');
    input.setAttribute("type","checkbox");
    input.style = 'margin: 12px'
    let list = document.createElement('div')
    list.style = "margin: 4px"
    list.append(input, item);
    app.append(list)
})

Les comparto mi soluci贸n 馃槂

Primero cree un div en con un ID que me va a servir para poder llamarlo desde mi JS:

<div id="reto"></div>

Luego Cree mi Array con tareas por hacer y las inyecte a mi HTML as铆 como hicimos en el ejemplo de esta clase:

const toDos = [
            { todo: 'barrer', completado: 'checked' },
            { todo: 'comer', completado: 'checked' },
            { todo: 'estudiar', completado: '' },
            { todo: 'programar', completado: 'checked' },
            { todo: 'cocinar', completado: '' },
            { todo: 'comer', completado: 'checked' }
        ]
        const reto = document.getElementById('reto');
        toDos.forEach(toDo => {
            reto.innerHTML += `
            
                <li>
                    <p>${toDo.todo}</p>
                    <input type="checkbox" ${toDo.completado}/>
                </li>
            `
        });

Done!
.
.
.

    <div id="list"></div>
    <script>
        const list = document.querySelector('#list');
        const tasks = [
            {title: 'Clean the house', status: 'done'},
            {title: 'Prepare dishes', status: 'pending'},
            {title: 'Fold clothes', status: 'pending'},
            {title: 'Fix the pipe', status: 'done'},
            {title: 'Buy water', status: 'pending'},
        ]
        tasks.forEach(item => {
            if(item.status == 'done'){
                list.innerHTML += `<input type="checkbox" checked>${item.title}</input>`
            } else {
                list.innerHTML += `<input type="checkbox">${item.title}</input>`
            }
        })
    </script>

Aqu铆 dejo mi desarrollo:

Utilice un ternario para validar el status de cada task y as铆 asignar un 鈥渃hecked鈥 a cada input 馃榿

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

  <h1>ForEach</h1>

  <div id="tasks">
    <!--<label for="task1">Tarea 1:</label>-->
    <!--<input id="task1" type="checkbox" name="task1" checked disabled>-->
  </div>

  <script>
    let tasks = [
      { id: 001, description: "To do breakfast", status: true },
      { id: 002, description: "To do JS test", status: false },
      { id: 003, description: "To do cleaning", status: true }
    ];

    let divTasks = document.getElementById("tasks");

    tasks.forEach(e => {
      divTasks.innerHTML += `
      <label for="${e.id}">Tarea ${e.id} - ${e.description}</label>
      <input id="${e.id}" type="checkbox" name="${e.id}" ${e.status ? "checked" : ""} disabled>
      <br>
      `;
    })
  </script>
  
</body>
</html>

Saludos, hice el ejercicio utilizando:

  • una lista de compras,
  • renderizada como una tabla (por variar),
  • agregu茅 los elementos al arreglo (push) en lugar de concatenaci贸n (cadena += otraCadena) porque las cadenas son inmutables, tendr铆a cada vez que destruir la anterior y crear una nueva que es m谩s grande con cada iteraci贸n.
	shoppingList = [
		{
			category: 'personal cleanliness',
			item: 'toothpaste',
			ready: false
		},
		{
			category: 'personal cleanliness',
			item: 'soap',
			ready: true
		},
		{
			category: 'personal cleanliness',
			item: 'dental floss',
			ready: false
		},
		{
			category: 'food',
			item: 'bread',
			ready: false
		},
		{
			category: 'food',
			item: 'sliced cheese',
			ready: false
		},
		{
			category: 'food',
			item: 'ham',
			ready: true
		},
	]

	const rows = [] 
	shoppingList.forEach(el => rows.push(`
		<tr>
			<td>${el.category}</td>
			<td><label><input type="checkbox" ${el.ready ? 'checked' : ''}>${el.item}</label></td>
		</tr>`)
	);    

	const table = `
	<h1>Shopping List</h1>
	<table>
		<thead>
			<tr><th>Category</th><th>Item</th></tr>    
		</thead>
		<tbody>
			${rows.join('')}
		</tbody>
	</table>`    

	const app = document.getElementById('app')
	app.innerHTML = table

Tambi茅n existe esta opci贸n:

for (letter of letters){
    console.log('2', letter);
}

Este mi aporte con humildad

<code> 
const mostrar = document.getElementById('appLista');
const listaTareas =[
    {title: "Limpieza", status: 'Terminado'},
    {title: "Tarea", status: "Falta hacer"},
    {title: "Cocinar", status: 'Terminado'},
    {title: "Estudiar", status:'Falta hacer'},
    {title: "Jugar", status: 'Terminado'},
];

const nodos = document.createElement('ul');

listaTareas.forEach(({title, status}) => {
    const element= `
    <li>
        <label for="${title}"> ${title}</label>
        <input type="checkbox" name="${title}" id="${title}" ${status ==='Terminado' ? 'checked' : ''} >
    </li>`
    nodos.innerHTML += element;
})

mostrar.append(nodos);
const letters = ['a', 'b', 'c'];

console.time('for');

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

console.timeEnd('for');


console.time('forEach');

letters.forEach(item => console.log('forEach', item));

console.timeEnd('forEach');

Mi soluci贸n al reto esen HTML, crear varios input de tipo checkbox, uno para cada tarea, con atributos value relacionados con la tarea que representan:

    <div>
        Sacar la basura<input type="checkbox" id="sacar_basura" value="Sacar Basura"><br>
        Hacer la compra<input type="checkbox" id="hacer_compra" value="Hacer la compra"><br>
        Pagar el internet<input type="checkbox" id="pagar_internet" value="Pagar el internet"><br>
        Dar comida al gato<input type="checkbox" id="comida_gato" value="Dar comida al gato">
    </div>

Luego en JavaScript, crear variables que contengan a cada input checkbox y a帽adirles un listener para que el evento 鈥渃hange鈥 ejecute una funci贸n validarChecked:

        const sacar_basura= document.getElementById("sacar_basura");
        sacar_basura.addEventListener("change", validarChecked);

        const hacer_compra= document.getElementById("hacer_compra");
        hacer_compra.addEventListener("change", validarChecked);

        const pagar_internet= document.getElementById("pagar_internet");
        pagar_internet.addEventListener("change", validarChecked);

        const comida_gato= document.getElementById("comida_gato");
        comida_gato.addEventListener("change", validarChecked);

Despu茅s creo el array que contiene a las variables antes creadas:

        const tareas = [
            sacar_basura,
            hacer_compra,
            pagar_internet,
            comida_gato
        ];

Y escribo la funci贸n validaChecked que se ejecutar谩 cada vez que alguno de los input checkbox cambie de estado. Esta funci贸n se encarga primero de limpiar el div 鈥渁pp鈥 que ya cre贸 el profesor para mostrar las tareas realizadas, luego recorre el array tareas y verifica si el elemento tiene el atributo checked en true. En caso positivo, agrega el value de dicho elemento en el div 鈥渁pp鈥.

        function validarChecked() {
            app.innerHTML = "";
            tareas.forEach(tarea => {
                if(tarea.checked) {
                    app.innerHTML += `<li>${tarea.value}, listo</li>`;
                }
            })
        }

    const taskList = [
        {name:'Read',done:true},
        {name:'Cook',done:false},
        {name:'sport',done:true},
    ]    

    const app = document.getElementById('app');
    
    taskList.forEach(items=>{
        const li = document.createElement('li');
        const input = document.createElement('input');
        li.innerHTML = `${items.name}`;
        input.type = 'checkbox';
        input.checked = `${items.done?'checked':''}`;
        li.append(input);
        app.append(li);
        console.log(li);
    })

Hola, por aca les dejo mi soluci贸n al problema planteado.

const toDoList = [
            { title: 'Entrar a platzi', done: true },
            { title: 'Entrar a la Intranet', done: false },
            { title: 'Hacer el almuerzo', done: false },
        ]
        const element = document.getElementById('main')
        
        toDoList.forEach((item, index, array)=>{
            const input = document.createElement('input')
            const label = document.createElement('label')
            const br = document.createElement('br')

            input.setAttribute('type', 'checkbox')
            input.setAttribute('id', `task-${index + 1}`)
            label.setAttribute('for', 'task-${index + 1}')

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

            label.appendChild(document.createTextNode(`${item.title}`))
            label.appendChild(input)

           
            element.appendChild(label)
            element.appendChild(br)

        })
<!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>
    <!-- renderizamos el array de elementos-->
    <div id="app"></div>
    <script>
       
        const tasks = [
            {title: 'Platzi Challenge', status:'Completed'},
            {title: 'English Lessons', status:'Uncompleted'},
            {title: 'Workout', status:'Uncompleted'},
            {title: 'Design Project', status:'Completed'}
        ];
      // iteramos el div
        const app =document.getElementById('app');
        tasks.forEach(task => {
            app.innerHTML += `<li>${task.title} - ${task.status} <input type= "checkbox"></li>`
        });

    </script>
</body>
</html>

C贸digo para el pintado de array de la lista de tareas.

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

        const tasks = [
            {title: "Estudiar Javascript", status: "Terminada" },
            {title: "Terminar dise帽o de la web", status: "Faltante" },
            {title: "Iniciar Curso de Ingles", status: "Faltante" },
            {title: "Subir ultimo commit del proyecto SOW", status: "Terminada" },
        ]
        const nodes = document.createElement('ul');

        tasks.forEach(({title, status}) => {
            const element = 
            `
                <li>
                    <label for="${title}">${title}</label>
                    
                    <input type="checkbox" name="${title}" id="${title}" ${status === 'Terminada' ? 'checked': ''}>
                </li>
            `
            nodes.innerHTML += element;
        });
        
        app.append(nodes);

Solucion 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>Document</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const app = document.getElementById("app")
        const nodes = [];//almacenamos los recorridos hechos por el forEach y luego los imprimos con innerhtml
        const tasks = [
            { task: "tarea 1", state: true},
            { task: "tarea 2", state: false},
            { task: "tarea 3", state: true},
            { task: "tarea 4", state: false},
            { task: "tarea 5", state: true},
        ]

        tasks.forEach(({ task, state }) => {
            const element = `
                <li>
                    ${task} y esta <input type="checkbox" ${state ? "checked" : null}/>
                </li>
            `;
            nodes.push(element)
            app.innerHTML = nodes.join("")//para juntar todo en un solo array, ya que salen separados por ',' que usan los arrays
        }); 
    </script>
</body>
</html>

Esta es la soluci贸n que realice a la tarea asignada, me divert铆 pr谩cticando y profundizando en mis conocimientos, sobre todo en el manejo del DOM ya enviando datos de un array.

======================
<body>
<div id=鈥渢itle鈥></div>
<div id=鈥渢area鈥></div>
<script src="鈥/server/02-ListaTareas.js">
</script>
</body>

Hice este en un js aparte llamado 02-ListaTareas.js
const title = document.getElementById(鈥渢itle鈥)
const tarea = document.getElementById(鈥渢area鈥)

const tasks = [
{
name:鈥淓studio鈥,
type: 鈥淭rabajo de JS鈥,
state: 鈥渄oing鈥,
date:鈥19 Septiembre鈥
},
{
name:鈥淭rabajo鈥,
type: 鈥淓ntrega planeaciones鈥,
state: 鈥渄one鈥,
date:鈥17 Septiembre鈥
},
{
name:鈥渃asa鈥,
type: 鈥淢ercar鈥,
state: 鈥減ending鈥,
date:鈥25 Septiembre鈥
}
]

title.innerHTML +=<h1>Ejercicio</h1>

tasks.forEach(task =>{
tarea.innerHTML += <ol>${task.name}</ol> <li>${task.type}</li> <li> ${task.date}</li> <li> ${task.state}</li>
})

My ejercicio para la clase, depende del estado si es true o false la casilla se marca o no por defecto. o(锟b柦锟)銉栶煉

<script>
const tasklist = [
{
taskTitle: 鈥淒o the bed鈥,
done: true,
},
{
taskTitle: 鈥淏rush my teeth鈥,
done: false,
},
{
taskTitle: 鈥淧repare the breakfast鈥,
done: true,
},
{
taskTitle: 鈥淪tudy鈥,
done: false,
},
];

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

		tasklist.forEach((element) => {
			app.innerHTML += `
            <li>${element.taskTitle} </li>
            <input type='checkbox' ${element.done ? "checked" : ""}></input>
            `;
		});
	</script>

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>For each</title>
</head>
<body>
<div id=鈥渁pp鈥></div>

<script>
    let task =[
    {'title':'read a book','status':true},
    {'title':'take a shower','status':false},
    {'title':'make a dinner','status':true},
];

let divApp= document.getElementById('app');


task.forEach(element=>{
    divApp.innerHTML+=`<li>Tarea: ${element.title}`+(element.status==true?` <input type="checkbox" checked> `:` <input type="checkbox" > `) +`</li><br>`;
});

</script>

</body>
</html>

Mi aportaci贸n

La propiedad que necesitan para selecccionar su checkbox es 鈥榗hecked鈥

    <div id="reto"></div>
    <script>
        let tareas = [
            {
                titulo:"lavar", estado: true
            },
            { 
                titulo:"cocinar", estado: false
            },
            { 
                titulo:"estudiar",estado: true
            },
            { 
                titulo:"planchar", estado: false
            },
            { 
                titulo:"pasear", estado: false
            }];

            let myTareas = document.getElementById("reto");
            tareas.forEach(item =>{
                reto.innerHTML += `<li>${item.titulo} - <input type="checkbox" ${item.estado && 'checked'} /></li>`

            
            });

    </script>
</body>

Hola les comparto mi soluci贸n 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>Document</title>
</head>
<body>
  <div id="app"></div>
  <script>
    const listTask = [
      {title: "lavar", isFinish: true},
      {title: "cocinar", isFinish: false},
      {title: "trabajar", isFinish: false},
      {title: "manejar", isFinish: true},
      {title: "comprar almuerzo", isFinish: true}
    ]

    const app = document.getElementById('app');
    listTask.forEach(task => app.innerHTML += `
    <li> ${task.title}
        <label> Finished task <input type="checkbox" 
          ${task.isFinish ? 'checked' : undefined}>
        </label>
    </li>`);
  </script>
</body>
</html>

Esta fue mi soluci贸n para el reto

<body>
    <div id="app"></div>
    <script>
      const list = [
        { task: "Do the dishes", done: true },
        { task: "take a nap", done: false },
        { task: "Buy the milk", done: false },
        { task: "Read the articles", done: true },
      ];
      const app = document.getElementById("app");
      list.forEach((list) => {
        app.innerHTML += `<li>
            <p>${list.task}</p>
            <input type="checkbox" ${list.done ? "checked" : ""}/>
            </li>`;
      });
    </script>
  </body>

este curso pinta que esta super bueno

Mi solucion al reto

<div id="homework"> <h2>homeworks</h2></div>
    <script>
        const homeworks = [
        {title: 'clean the living Room', complete: "yes"},
        {title: 'clean the Room', complete: "no"},
        {title: 'clean the bathroom', complete: "yes"},
        {title: 'clean the office', complete: "yes"},
        {title: 'clean the kitchen', complete: "No"}
        ];

        const checking = document.getElementById('homework');
        homeworks.forEach( homework => {
          checking.innerHTML += `<li>${homework.title} - ${homework.complete} <input type="checkbox"> </li>`;
        });
    </script>

As铆 qued贸 el reto, le agregue css y todo qued贸 en un html por ser un ejercicio sencillo. 馃槣

<script>
        const products = [
            {
                title: 't-shirt',
                price: 100,
                stock: false
            },
            {
                title: 'socks',
                price: 50,
                stock: true
            },
            {
                title: 'caps',
                price: 80,
                stock: false
            },
        ]

        let productsInStock = '';

        products.forEach(product => {
            productsInStock +=
                `<li>${product.title} - ${product.price} - ${product.stock ? '馃槉 In Stock' : '馃槗 Sorry!'}</li>`
        })

        document.getElementById('app').innerHTML = productsInStock

        
    </script>

Quise experimentar un poco y no solamente el reto que nos dejo Nicolas.
Espero que les sirva como referencia para hacer sus propios cambios.

<!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>
    <style>
        .statusActivate{
            height: 20px;
            border: 1px solid green;
            margin: 10px 0;
            color: white;
            text-align: center;
            text-decoration: none;
            list-style: none;
            background: linear-gradient(0deg, green, rgb(2, 84, 2));
        }
        .statusDesactivate{
            height: 20px;
            border: 1px solid green;
            margin: 10px 0;
            text-align: center;
            text-decoration: none;
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>Realizando ejecucion de foreach</h1>
    <h2>Lista de productos</h2>
    <div id="app"></div>
    <script>
        const products = [
        { title : 'Burguer', price : 121 },
        { title : 'Pizza', price : 20 },
        ]
        const app = document.getElementById('app')
        products.forEach(product => {
            app.innerHTML += `<li>${product.title} - ${product.price}</li>`
        })
    </script>
    <br>
    
    <div id="appTarea"></div>
    <script>
        const tareas = [
        { title : 'Ejercicio', description : 'Necesito hacer ejercicio mas seguido', statusComplete : true },
        { title : 'Dormir', description : 'Necesito ir a dormir', statusComplete : true },
        { title : 'Comprar', description : 'Necesito ir a comprar jabon por que no tengo', statusComplete : false },
        ]
        const appTarea = document.getElementById('appTarea');
        appTarea.innerHTML += `<h2>Lista de tareas</h2>`;
        appTarea.innerHTML += `<ol>`;
        tareas.forEach(tarea => {
            appTarea.innerHTML += `<li class=${tarea.statusComplete ? 'statusActivate' : 'statusDesactivate'}>${tarea.title} - ${tarea.description}</li>`
        })
        appTarea.innerHTML += `</ol>`;
    </script>
</body>
</html>

mi solucion espero les ayude

<!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 || checkbox</title>
    
</head>
<body>
    <main class="lista">
        <h2>Check list</h2>
        <form>
            <ul>
            </ul>
            <button type="reset">Clear</button>
        </form>
    </main>
    <script>
        //lista de elementos 
    const todo = ['comer', 'dormir', 'trabajar', 'ejercicio', 'ba帽arse', 'beber' ];
        //seleciono el nodo de referencia para mostrar contenido lista
    const referencia = document.querySelector('ul');
        //metodo de recorrido array
    todo.forEach(items => {
        //por cada elemento de la lista inserto etiquetas html mas contenido
        referencia.innerHTML += `<li><label><input type='checkbox'><span></span><p>${items}</p></label></li>`;
    });

    //metodos de insertar etiquetas
    /*
    const parrafo = document.createElement('p');
    const contenedor = document.querySelector('label');
    contenedor.append(parrafo); //agrega al final del elemento seleccionado
    const arriba = document.querySelector('span');
    contenedor.insertBefore(parrafo, arriba); //agrega antes del elemento selecionado
    const referencia = document.querySelector('form');
    const nodo = document.createElement('h1');
    referencia.insertAdjacentElement('beforebegin', nodo);//antes de lareferencia
    referencia.insertAdjacentElement('afterbegin', nodo);//como hija de la referencia de primero
    referencia.insertAdjacentElement('beforeend', nodo);//como hija de la referencia al final
    referencia.insertAdjacentElement('afterend', nodo);//despues de la referencia
    */
    
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #21D4FD;
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
        
        .lista{
            position: relative;
            background: #FEF7FF;
            width: 350px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border-radius: 10px;
            
            
        }
        .lista h2{
            background: #B0A8B9;
            color: #FF9671;
            padding: 10px 20px;
            font-weight: 600;
            border-radius: 10px 10px 0 0;
            text-align: center;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
        .lista ul{
            position: relative;
            padding: 20px;
        }
        .lista ul li{
            position: relative;
            list-style: none;
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
        .lista ul li:last-child{
            border-bottom: none;
        }
        .lista ul li label{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .lista ul li label input{
            visibility: hidden;
            appearance: none;
        }
        .lista ul li label span{
            position: relative;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .lista ul li label p{
            position: absolute;
        }
        .lista ul li label span::before{
            content: '';
            position: absolute;
            top: 5px;
            width: 10px;
            height: 5px;
            border-left: 2px solid #ccc;
            border-bottom: 2px solid #ccc;
            transform: rotate(-40deg);
        }
        .lista ul li label input:checked ~ p{
            text-decoration: line-through;
            color: #ccc;
        }
        .lista ul li label input:checked ~ span{
            background: #03a9f4;
            border: 1px solid #03a9f4;
        }
        .lista ul li label input:checked ~ span::before{
            border-left: 2px solid #B721FF;
            border-bottom: 2px solid #B721FF;
        }
        
        button{
            width: 80px;
            height: 30px;
            margin: 0 auto;
            margin-left: 40%;
            margin-bottom: 20px;
            background-color: #B721FF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            font-weight: 500;
        }
    </style>
</body>
</html>

mi reto:

<div id="app"></div>
    <script>
        const list_task =[
        {name: 'tarea1', description:'logro1', checkbox:'checked'},
        {name: 'tarea2', description:'logro2', checkbox:''},
        {name: 'tarea3', description:'logro3', checkbox:''},
        {name: 'tarea4', description:'logro4', checkbox:'checked'}
        ];

        const app = document.getElementById('app');
        list_task.forEach(task=>{
            app.innerHTML += `<li>${task.name} `;
            app.innerHTML += `<ul> ${task.description} <input type="checkbox" ${task.checkbox} />`;
            app.innerHTML += `</ul></li>`;
        });

Mi aporte:

<!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>
    <h1>For each</h1>
    <div id="app"></div>

    <script>
        // const products = [
        //     { title: "Burguer", price: 21 },
        //     { title: "Pizza", price: 20 },
        // ];
        // const app = document.getElementById("app");
        // products.forEach(product => {
        //     app.innerHTML += `<li>${product.title} - ${product.price}</li>`;
        // });

        const tasks = [
            { 
                task: 'Tarea 1',
                desc: 'Esta es la tarea 1',
                done: true
            },
            { 
                task: 'Tarea 2',
                desc: 'Esta es la tarea 2',
                done: false
            },
            { 
                task: 'Tarea 3',
                desc: 'Esta es la tarea 3',
                done: true
            },
            { 
                task: 'Tarea 4',
                desc: 'Esta es la tarea 4',
                done: false
            }
        ];

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

        tasks.forEach(task => {
            app.innerHTML += 
            `<li>
                Tarea: ${task.task} -
                Descripcion: ${task.desc} - 
                Estado: <input type="checkbox" ${task.done ? 'checked' : ''}/>
            </li>`
        });

    </script>
</body>
</html>

Maneras de recorrer un objeto

el retoo

<body>
    <div id="app"></div>
    <script>
        const products = [
            { title: 'jugar con el gato', status: 'sisa'},
            { title: 'jugar con el perro' , status: 'noka'},
            { title: 'dar de comer al pueblo' , status: 'noka'},
            { title: 'lavar la moto' , status: 'sisa'},
        ];
        const app = document.getElementById('app');
        products.forEach(product => {
            app.innerHTML += `<li>${product.title} - ${product.status} <input type="checkbox"> </li>`;
        })
    </script>
</body>

Soy nuevo en javascript espero sugerencias para mejor mi c贸digo.

<div id="tareas"></div>

    <script>
      const tareas = [
        {
          title: "Trabajar",
          time: 2,
          status: "complete",
        },
        {
          title: "Comer",
          time: 1,
          status: "complete",
        },
        {
          title: "Comprar",
          time: 3,
          status: "In-Progress",
        },
      ];

      const app = document.getElementById("tareas");
      tareas.forEach((tarea) => {
        app.innerHTML += `
            <input type='checkbox' id='${tarea.title}' name='${tarea.title}' ${
          tarea.status === "complete" ? "checked" : ""
        } />
        <label for='${tarea.title}'>${tarea.title}</label>
        `;
      });
    </script>

Aqu铆 est谩 m铆 soluci贸n

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

const misCursos = [
    {curso: 'Curso de Html y Css', estado: true},
    {curso: 'Curso basico de JavaScript', estado: true},
    {curso: 'Animacione en Css', estado: true},
    {curso: 'Base de Datos', estado: false},
    {curso: 'Backend', estado: false},
];

misCursos.forEach(cursoReady =>{
    app.innerHTML += `<p>${cursoReady.curso} - 
    <input type="checkbox" ${cursoReady.estado ? 'checked' : "" } /> 
    </p>`
});

les comparto 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>chores</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const chores = [
        {name: "make html page", hour: "8:00 am", done: true},
        {name: "make css page", hour: "10:00 am", done: false},
        {name: "make the buttons", hour: "12:00 pm", done: true},
        {name: "make the footer", hour: "02:00 pm", done: false},
        {name: "finish the proyect", hour: "4:00 pm", done: false},];

        const app = document.getElementById('app');
        chores.forEach(chore => {
            app.innerHTML += `<li>${"chore: " + chore.name} - ${chore.hour} - ${"done? " + chore.done} </li>`;})
    </script>
</body>
</html>

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);
    }
  });
});
``

As铆 qued贸 mi reto, gracias a aportes de compa帽eros pude solucionarlo y opt茅 por el operador ternario para hacerlo en menos lineas de c贸digo

Soluci贸n al reto. Es una p谩gina muy sencilla pero eficiente, solo para comprender y aplicar lo aprendido en clase:

Script:

    <script>
        const tasks = [
            { title: 'Reuni贸n', hour: '8:00 a.m.', done: false },
            { title: 'Almuerzo', hour: '12:00 p.m.', done: true },
            { title: 'Trabajo', hour: '4:00 p.m.', done: true },
            { title: 'Cena', hour: '9:00 p.m.', done: false },
        ];
        const app = document.getElementById('app');
        tasks.forEach(task => {
            app.innerHTML += `<li> <input type="checkbox" ${task.done ? 'checked' : ''} />  ${task.title} - ${task.hour}</li>`;
        })
    </script>