ForEach

2/27
Recursos

Aportes 100

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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);});

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

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>

ForEach método útil para recorrer un array y realizar alguna operación sobre cada elemento del mismo

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

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

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!

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>

Lanzar http-server:

npx http-server client 

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.

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>

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

😮 Genial, no sabia lo poderoso que es ForEach

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)

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

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

Reto:

<body>
    <div id="app"></div>
    <script>
      const tasks = [
        { title: "Study", status: true, id: 1 },
        { title: "Clean", status: false, id: 2 },
        { title: "Workout", status: true, id: 3 },
      ]
      const app = document.getElementById("app")
      tasks.forEach(task => {
        app.innerHTML += `<li><input type="checkbox" id='${task.id}'> ${task.title}</li>`
        if (task.status) {
          document.getElementById(task.id).setAttribute("checked", "")
        }
      })
    </script>
</body>

Mi aporte de dos formas:

<!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 = [
        //     {tittle: 'burger', price: 21},
        //     {tittle: 'pizza', price: 19},
        // ];
        // const app = document.getElementById('app');
        // products.forEach(i => { //recorremos nuestro array con forEach
        //     app.innerHTML += `<li>${i.tittle} price: $${i.price}<li/>`; //ejecutamos la logica: concatenamos al .innerHTML
        // });
    </script>
    <span></span>
    <p>Reto 01:</p>
    <div id="app1" style="list-style-type:none"></div>
    <script>
        const app1 = document.getElementById('app1');

        const taks = [
            {tittle: 'maquetacion', done: true},
            {tittle: 'html', done: true},
            {tittle: 'css', done: false},
            {tittle: 'js', done: false},
            {tittle: 'reactJS', done: false},
        ];

        //1:
        taks.forEach(({tittle, done}) => {
            const elements = 
            `<li>
                <input type='checkbox' ${done && 'checked'} />
                <label>${tittle}<label/>
            </li>`;
            app1.insertAdjacentHTML('beforeend', elements);
        });

        //2:
        taks.forEach(i => {
            app1.innerHTML +=
            `<li>
                ${i.tittle}
                <input type='checkbox'${i.done && 'checked'}/>
            </li>`;
        });
    </script>
</body>
</html>

Aplique lo visto hasta ahora en el curso de JavaAcript

Les comparto mi solución 😁😁

<!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 = [
            {task: 'Make excersice', state: true},
            {task: 'Learn English', state: false},
            {task: 'Read a book', state: true}
        ];

        const app = document.getElementById('app');
        products.forEach(product => {
            if(product.state){
                app.innerHTML += `<li>${product.task} - Complete <input type = "checkbox" ${product.state ? 'checked' : ''}/></li>`
            } else {
                app.innerHTML += `<li>${product.task} - Incomplete <input type = "checkbox" ${product.state ? 'checked' : ''}/></li>`
            } 
        })    
    </script>
</body>
</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>Arrays</title>
  
</head>
<body>
   <main>
       <div class="showArray">

       </div>

      
   </main>
 
    <script>
        const show=document.querySelector(".showArray");

        const arreglo=[
            {Name:'peter',
             age:23,
             adress:'Av 23 Fort laudardale'},
             {Name:'jhon',
             age:18,
             adress:'32 Road'},
             {Name:'Mary',
             age:20,
             adress:'5 av, Fl'}
        ]
           arreglo.forEach(person=>{
            show.innerHTML+=`
            <div>
             <li>${person.Name}</li>
             <li>${person.age}</li>
             <li>${person.adress}</li>
           </div>    
           `
           })
          
           console.log(arreglo)
    </script>
</body>
</html>

const app = document.getElementById('app')
const tasks = [
            { name: 'Write this code', time: '5 minutes'},
            { name: 'Do housechores', time: '1 hour'},
            { name: 'Work on my portfolio', time: '1 hour'}
        ];
        // const app = document.getElementById('app')
        tasks.forEach(elem => {
            app.innerHTML += `<li>${elem.name} - ${elem.time} <input type="checkbox"></li>`
        })

Un forma corta de recorrer el array con el for pero diferente a la que uso el profe es con el for of, ya que el “of” justamente nos dice que va a recorrer por cada uno de los índices del array

for ( i of letters)
console.log(i)

Le hice una pequeña variación y es que si el alumno tiene puntaje mayor a 70 es aprobado

<div id = "app"></div>
    <script>
       
        const tarea = [
            {name: "juanito", puntaje: 60},
            {name: "luis", puntaje: 80},
            {name: "carlos", puntaje: 71},
            {name: "paola", puntaje: 50},
        ];
        const appi = document.getElementById("app");
        tarea.forEach((i) => {
            if (i.puntaje > 70){
                appi.innerText +=  ("el alumno " + i.name + " es APROBADO" ) 
            }
        }
        )
    </script>

Intentando usar el forEach en react descubro que no sirve para renderizar xq su resultado no se almacena en memoria.
Es decir, el resultado sale en consola pero no se renderiza en pantalla

ver video aclaratorio
https://www.youtube.com/watch?v=1R3hlqUMmk8

import "./App.css";

function App() {
  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,
    },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>hola</h1>
        <ul>
          {tasks.forEach((element) => {
            console.log(element.task);
            <li>
              <h1>{element.task}</h1>
            </li>;
          })}
        </ul>
      </header>
    </div>
  );
}

export default App;

Aquí mi aporte.😁

const app = document.getElementById('app');
const tasks =
[
  {
    title: "To do exercises",
    status: true,
  },
  {
    title: "Check the inbox",
    status: true,
  },
  {
    title: "To finish the free programming course from Platzi",
    status: false,
  },
  {
    title: "To go to play soccer today",
    status: false,
  },
  {
    title: "To drink some coffee in the afternoon",
    status: false,
  },
  {
    title: "To do the homework",
    status: true,
  },
  {
    title: "To give water to your pet",
    status: false,
  },
];

tasks.forEach(task => {
  if (task.status) {
      app.innerHTML += `<li>${task.title} <input type="checkbox" checked></li>`;
  } else {
      app.innerHTML += `<li>${task.title} <input type="checkbox"></li>`;
  }
});

Y lo hice así

const nodes = [];

tasks.forEach(({title, checked}) => {
  const element = 
  `
  <li>
    <input 
      type="checkbox" 
      ${checked ? 'checked' : ''} 
    />
    ${title}
  </li>
  `
  nodes.push(element);
});

app.innerHTML = nodes.join('');

😊 Reto cumplido

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

        const elements = [];
        const tasks = [
            {
                title: 'Go to the store',
                completed: true
            },
            {
                title: 'Finish homework',
                completed: false
            },
            {
                title: 'Make dinner',
                completed: false
            },
            {
                title: 'Clean room',
                completed: true
            },
            {
                title: 'Sleep',
                completed: false
            }
        ];

        tasks.forEach(task => {
            const completed = document.createElement('input');
            completed.type = 'checkbox';
            completed.checked = task.completed;

            const title = document.createElement('span');
            title.textContent = task.title;

            const container = document.createElement('div');
            container.append(completed, title);

            elements.push(container);
        });

        app.append(...elements);

simplemente me encanta cada vez que sacan sus trucos de la manga. En toda la escuela de desarrollo web no ha aparecido ningun curso de NODE y aqui el profesor lo usa muy tranquilo, sin explicar nada jajaj. Simplemente Platzi te amo!

Así me quedo a mi:

La verdad es que no tenia idea de que se podía escribir HTML en JavaScript de esa manera.

<!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 id="ao"></div></div>
  <script>
    const cursos_pendientes = [{name:"z",title:"curso de ecmaScript 6+",status: "es6"},{name:"a",title:"curso de manipulación de arrays",status: "ma"},{name:"b",title: "curso de engine(v8)",status:"e(v8)"},{name:"c",title: "curso de asincronismo con javascript",status:"asi"}];
    
    let app =document.getElementById("app");
    
    let ch;
    let mostrar_cursos = cursos_pendientes.forEach(curso =>{
      app.innerHTML += `<li>${curso.title}<p id="${curso.name}"></p><input type="checkbox" id="${curso.status}" onclick="next()"></li>`;
  });

  let es6 = document.getElementById("es6");
  let ma = document.getElementById("ma");
  let ev8 = document.getElementById("e(v8)");
  let asi = document.getElementById("asi");
  
  let z = document.getElementById("z");
  let a = document.getElementById("a");
  let b = document.getElementById("b");
  let c = document.getElementById("c");
  
  z.innerText = `curso perdiente`;
  b.innerText = `curso perdiente`;
  a.innerText = `curso perdiente`;
  c.innerText = `curso perdiente`;
  
  let next = ()=>{
  (es6.checked == true)? z.innerText = `curso realizado` : z.innerText = `curso perndiente`;
  (ma.checked == true)? a.innerText = `curso realizado` : a.innerText = `curso perndiente`;
  (ev8.checked == true)? b.innerText = `curso realizado`:b.innerText = `curso pendiente`;
  (asi.checked == true)? c.innerText = `curso realizado`:c.innerText = `curso pendiente`;
}
  </script>
</body>
</html>


Mi versión del reto:


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

<script>

        const tareas =[
            {title: 'Estudiar_JavaScript', completed: true},
            {title: 'Estudiar_Vue', completed: false},
            {title: 'Estudiar_React', completed: false},
        ];
        const tareasHtml = document.getElementById('tareas');

        let contador = 0;
        tareas.forEach(item=>{  
            contador++
            let isChecked = item.completed? "checked":"";
            tareasHtml.innerHTML+=         
            `  <div>
                    <label for="${item.title}">
                        <input type="checkbox" id="${item.title}" name="${item.title}" value=${contador} ${isChecked}>${item.title}
                    </label>
                </div>
            `
        })


</script>

const tareas = [
{materia: “Matemáticas”, completado: true},
{materia: “Contabilidad V”, completado: false},
{materia: “Algoritmos”, completado: true}
];
const tarea = document.getElementById(“tarea”);
tareas.forEach(tareita => {
tarea.innerHTML += <li>${tareita.materia} </li>;
if(tareita.completado == true) {
const agregar = tarea;
agregar.innerHTML += <input type="checkbox" checked>
}
});

RETO

  const tasks = [
            {tittle: 'estudiar js', status : 'completa'},
            {tittle: 'ir a la reunión', status : 'incompleta'},
            {tittle: 'comprar pan', status : 'incompleta'},
            {tittle: 'hacer tarea de matematicas', status : 'incompleta'},
        ];

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

        tasks.forEach(task => {
            if(task.status === 'completa'){
                app.innerHTML += `<li> ${task.tittle} - ${task.status} <input type="checkbox" checked="true"> </li>`
            }else{
                app.innerHTML += `<li> ${task.tittle} - ${task.status} <input type="checkbox" > </li>`
            }
        }) 
// Tarea

const tienda = [
  {celular: 'iPhone', precio: '800$'},
  {celular: 'xiaomi', precio: '200$'}
];
const app = document.querySelector('#app');

tienda.forEach(producto => {
  app.innerHTML += `<li>${producto.celular} - ${producto.precio} </li>`
})

Mi aporte…

//for-each-1

const letra = ['a','b','c'];

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

//

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

Este tipo de estructuras para recorrer arrays son

muy efecivas al momento de renderizar peticiones

que nos devuelver un JSON

const d = document 
const products = [
    {title:'Burger',price:200},
    {title:'Pizza',price:320}
]

const $principal = d.getElementById('app')
const $desorderList = d.createElement('ul')
$principal.appendChild($desorderList)


products.forEach((e)=>{
    const $list = d.createElement('li')
    $desorderList.append($list)

    $list.innerText=`${e.title} costara: ${e.price}`
})
// 2 Lineas de codigo nomas :)
const letters = ['a','b','c','d']
letters.forEach(e => console.log(e))

Hola a todos, les comparto mi código de la solución a la tarea:

<!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</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const tasks = [
        { title: "Do the loundy", status: true },
        { title: "Wash my bike", status: false },
      ];

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

      tasks.forEach((task) => {
        app.innerHTML += `<li><input type="text" value="${
          task.title
        }"></span><input type="checkbox" ${task.status ? "checked" : ""}></li>`;
      });
    </script>
  </body>
</html>

Es super simple y fácil de entender, como pueden ver utilicé elementos HTML input para que se puedan editar las tareas y para que se pueda marcar o desmarcar el checkbox.

const tasks = [
            {task: "Learn JavaScript", status: true},
            {task: "Learn React", status: false},
            {task: "Learn Angular", status: false},
            {task: "Learn English", status: true},
            {task: "Learn Vue", status: false}
        ]

        const app = document.getElementById("app");
        const ul = document.createElement("ul");
        tasks.forEach(x => {
            ul.innerHTML += `<li>${x.task} - Status: <input type="checkbox" ${x.status && "checked"} /></li>`;
        })
        app.append(ul)

Mi Tarea

 <div id="tarea"></div>
<script>
        const personas = [
        {nombre: 'Gato', apellido: 'Michi' },
        {nombre: 'Perro', apellido: 'Firu' },
        ];

        const tarea = document.getElementById("tarea")
        personas.forEach(persona =>{
        tarea.innerHTML += `<li>${persona.nombre} - 	${persona.apellido}</li> `
        })
    </script>

Mi solucion 😁

    <script>
        const tasks = [
            { title: 'tarea 1', description: 'Descripcion tarea 1', done: false },
            { title: 'tarea 2', description: 'Descripcion tarea 2', done: true },
            { title: 'tarea 3', description: 'Descripcion tarea 3', done: false },
            { title: 'tarea 4', description: 'Descripcion tarea 4', done: true },
        ]
        const app = document.getElementById('app');
        tasks.forEach(task => {
            app.innerHTML += `
                <ul>
                    <li>
                        ${task.title} - ${task.description}
                        <input type="checkbox" name="done" ${task.done === true ? 'checked' : ''}>
                    </li>
                </ul>`
        })
    </script>

Esta es mi solución al reto:

const app = document.getElementById('tasks-list');

const tasks = [
    {name: 'Despertar', time: '6:30'},
    {name: 'Desayuno',  time: '7:30'},
    {name: 'Estudiar',  time: '8:00'},
    {name: 'Cocinar',   time: '12:00'},
    {name: 'Almorzar',  time: '13:00'},
];

tasks.forEach(obj => {
    app.innerHTML +=
	`<input type="checkbox"> <span> ${obj.name} a las ${obj.time} horas </span> </br>`;
});

Aquí les dejo mi ejercicio. 😃

<div id="app"></div>
    <script>
        const toDoList = [
            {toDo: "Compras de la semana", status: false},
            {toDo: "Leer libro", status: true},
            {toDo: "Escuchar capítulo del podcast", status: true},
            {toDo: "Ver pelicula", status: false},
        ];
        const app = document.getElementById("app"); 
          toDoList.forEach(toDoList => {
            app.innerHTML += `<li>${toDoList.toDo} - <input type="checkbox" ${toDoList.status ? 'checked' : ''}</li>`
        })
    </script>
<!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">
    <script>
        const tareas=[];
        function añadir(element){
            let value=input.value;
            tareas.push(value)
        };
        function enlistar(){
            const enlistado=document.getElementById("listita")
            tareas.forEach(tareas=>{
                enlistado.innerHTML+=`<li>${tareas}<input type="checkbox"></li>`})
    }
    </script>
    <title>Document</title>
</head>
<body>
    <h1>Lista de tareas</h1>
    <label for="">Inserta tareas pendientes</label>
    <input type="text" id="input" placeholder="Ej: Barrer">
    <button type="button" onclick="añadir()">Enviar</button>
    <button type="button" onclick="enlistar()">Terminar</button>
    <ul id="listita"></ul>
</body>
</html>

(

Esta fue mi solución al reto:

Resultado:

Reto

<!DOCTYPE html>
<html lang="es">
<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>01-ForEach</title>
</head>
<body>
    <div id="app"></div>
    <script>
       const tasks = [
           {
            title: 'Sacar al perro',
            completed: true
           },
           {
            title: 'Hacer la cena',
            completed: false
           },
           {
            title: 'Leer un libro',
            completed: false
           },
       ]

        const app = document.getElementById('app')

        tasks.forEach(task => {
            app.innerHTML += `<input id=${task.title} type='checkbox' ${task.completed ? 'checked' : null}/>${task.title} <br>`
        })
    </script>
</body>
</html>
<script>
        //array elementos
        const tasks = [
            {title: 'Aprender Angular', description: 'learning',done: false},
            {title: 'Aprender javascript', description: 'learning',done: true},
            {title: 'Aprender javascript', description: 'learning',done: true},
            {title: 'Aprender javascript', description: 'learning',done: false},
            {title: 'Aprender javascript', description: 'learning',done: false},
            {title: 'Aprender javascript', description: 'learning',done: true}
        ];
        //selector
        const app = document.getElementById('app');
        // fragment para crear varios elementos sin perder performance
        const fragment = document.createDocumentFragment()
        // foreach para crear varios elementos
        tasks.forEach(({title,description,done}) => {
            //Crear nodo LI
            const listTask = document.createElement('LI');
            // Agregando dentro del nodo li
            listTask.innerHTML = `            
                    Nombre: ${title} ||
                    descripcion:  ${description}
                    <input type="checkbox" ${done && 'checked'}>
            `;
            fragment.appendChild(listTask);
        })
        // Mostrar en el DOM el Fragment
        app.appendChild(fragment);
    </script>
<!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>forEach</title>
  <style>
    body{
      background-color: blanchedalmond;
    }
    .content__check{
      width: 100%;
    }

    .content__check li{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      text-align: center;
      padding: 5px;
    }
    .content__check li h3{
      font-size: 18px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .content__check li input{
      margin-left: 20px;
    }
  </style>
</head>
<body>
    <div id="app"></div>

    <div id="homeWork" class="content__check"></div>

    <script>
      const products = [
        { title: 'hamburguesa', price: 121},
        { title: 'pizza', price: 20}
      ];

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

      const homeWorks = [
        { name: 'ejercicio', time: '40min' },
        { name: 'estudiar', time: '60min' },
        { name: 'cocinar', time: '40min' }
      ];

      const check = document.getElementById('homeWork')
      homeWorks.forEach( cheked => {
        check.innerHTML += `
        <li>
          <h3>${cheked.name} - ${cheked.time}</h3>
          <input type="checkbox">
        </li>
        `
      })


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

Les comparto mi código del reto.

index.js

function addTaskHTML ({title, done}) {
    const doneTask = done ? `checked` : ``;
    formTasks.innerHTML += 
    `
        <label for="">
            <p>${title}</p>
            <input 
                type="checkbox" 
                ${doneTask}
            />
        </label>
    `;
}

const tasks = [
    {
        title: 'Limpiar',
        done: false,
    },
    {
        title: 'Estudiar',
        done: true,
    },
    {
        title: 'Cocinar',
        done: false,
    },
    {
        title: 'Bañarse',
        done: true,
    },
    {
        title: 'Comprar',
        done: true,
    },
];

const formTasks = document.getElementById('tasks-form');

tasks.forEach(addTaskHTML);
 

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>Reto</title>
</head>
<body>
    <form action="" id="tasks-form">
    </form>
    <script src="./index.js"></script>
</body>
</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>Reto forEach</title>

    <style>
        h1{
          text-align: center ;
          
        }

        .container{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
       span{
           justify-content: space-around;
       }

        

    </style>
</head>
<body>
    <h1>Task</h1>
    <div class="container">
    <div class="app" id="app">
    </div>
</div>
    <script>

        const app = document.querySelector('#app');
        const fragment = document.createDocumentFragment();
        const task =[
            {nombre: "bañar al perro", hecho:false},
            {nombre: "Estudiar NodeJS", hecho:true},
            {nombre: "Leer docuemntacion de MDN", hecho:false},
            {nombre: "Salir de compras", hecho:true},
        ];

        task.forEach( el => {
            const {nombre,hecho} = el;
            const div = document.createElement('div');
            div.className = "contenedor"
            const span = document.createElement('span');
           span.textContent = nombre;
            const input = document.createElement('input');
            input.type = 'checkbox';
            input.checked = hecho;
        

            div.append(input,span)
            fragment.appendChild(div)
        })
       
            app.append(fragment);


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

Holaa, dejo mi solución:

HTML

<<body>
    <div id="parent" style="display: flex;">
        <div id="div"></div>
        <div id="div2" style="margin-left: 10px;"></div>
    </div>
    <script src="./forEach.js"></script>
</body>> 

JS:

<const divList = document.getElementById("div")
const divList2 = document.getElementById("div2")

const tasks = [
    {   name: "Barrer",
        done: true
    },
    {   name: "Hacer la cama",
        done: false,
    },
    {   name: "Limpiar el baño",
        done: true,
    },
]

tasks.forEach((item) => {
    divList.innerHTML += `Tarea: ${item.name} <hr/>`
    if (item.done) {
        divList2.innerHTML += "Estado: Completada <hr/>"
    } else {
        divList2.innerHTML += "Estado: No completada <hr/>"
    }
})
> 

<!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 = [
            { title: 'take a shower', status: false },
            { title: 'Brush my teeth', status: false },
            { title: 'Go to work', status: false },
            { title: 'Cook dinner', status: false },
            { title: 'Eat dinner', status: false },
            { title: 'Watch TV', status: false },
            { title: 'Read a book', status: true },
            { title: 'Go to bed', status: false },
        ];

        const app = document.getElementById('app');
        const titleList = document.createElement('h1');
        titleList.textContent = 'Today Tasks List';

        app.append(titleList);


        const allElements = [];
        tasks.forEach(task => {
            const statusTask = task.status ? 'DONE' : 'UNDONE';
            const itemTask = document.createElement('li');
            itemTask.textContent = `${task.title} -> ${statusTask}`;

            allElements.push(itemTask);

        });

        app.append(...allElements);
    </script>
</body>
</html>

hola aqui les comparto el reto realizado

/* -----------/__RETO__/----------- */
const reto = document.querySelector('#reto')
const nodeListaDeTareas = []

const listaDeTareas = [
  {Title:'Bañar al perro', check:true},
  {Title:'limpiar el cuarto', check:false},
  {Title:'hacer el reto', check:true},
  {Title:'ser Js Sennior', check:false},
]
listaDeTareas.forEach((tarea) => {
  const element = document.createElement('li');
  const checkBox = document.createElement('input');
  checkBox.setAttribute('type',"checkBox");
  if(tarea.check){
    checkBox.setAttribute("checked","true" )
  }
  element.append(checkBox)
  const list = `
    ${tarea.Title}
  `
  element.append(list)
  nodeListaDeTareas.push(element);
});

reto.append(...nodeListaDeTareas);

/* -----------/__RETO__/----------- */```

El método forEach() ejecuta la función indicada una vez por cada elemento del array.

let frutas = ["manzana", "sandía", "pera"]
frutas.forEach(fruta => console.log(fruta))

si le queremos pasar solo una propiedad del objecto

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 } ) => console.log(title));

Usando lo visto en el curso de programación orientada a objetos básico e intermedio, intento aplicar estos conocimientos para crear un arreglo de tareas con objetos y arrays dentro de este array.
Aqui les dejo el código en JS

const tasks=[
    {
        number:1,
        description:'Alimentar gatitos',
        state:'Pendiente',
        tags:[
            'animalitos',
            'alimentacion',
            'gatitos',
            'amor'
        ],
        recordatory:{
            phone:'yes',
            socialMedia:[
                'twitter',
                'facebook',
                'whatsapp'
            ],
        },
    },
    {
        number:2,
        description:'Arreglar auto fuga aceite',
        state:'Realizado',
        tags:[
            'auto',
            'mantenimiento'
        ],
        recordatory:{
            phone:undefined,
            socialMedia:undefined,
        },
    }
];

tasks.forEach(task=>{
    let {number,description,state,tags,recordatory}=task;
    document.getElementById("app").innerHTML+=`<li>
    Task Number: ${number}
    <br>
    Description: ${description}
    <br>
    State: ${state}
    <br>
    Tags: ${tags}
    <br>
    Recordatory: 
    <li>Phone:${recordatory.phone}</li>
    <li>Social media record: ${recordatory.socialMedia}</li>
    <br>
    </li>`;
});

Y en este caso les dejo el 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>
</head>
<body>
    <div id="app">

    </div>
    <script src="../server/for-each.js"></script>
</body>
</html>

Esta es mi solución al reto:

const tasks = [
      {activity: "Buy groceries", checked: true, id: 1},
      {activity: "Clean the kitchen", checked: false, id: 2},
      {activity: "Do the Laundry", checked: false, id: 3},
    ]

    const app = document.getElementById('app');
    tasks.forEach(task =>  {
      app.innerHTML += `
        <li>
          <input type="checkbox" id=task${task.id}
          ${(task.checked) && "checked"}>
          <label for=task${task.id}>${task.activity}<label>
        </li>`
    })

Mi solución quedó así:

const tasks = [
  { name: 'Lavar el auto', completed: false },
  { name: 'Leer', completed: false },
  { name: 'Trabajar', completed: true },
  { name: 'Estudiar', completed: true },
]

const app = document.getElementById('app');
tasks.forEach((task, index) => {
  app.innerHTML += `
    <li>
      ${ task.name } - 
      <input 
        type="checkbox"
        id="task-${index}"
        ${task.completed && 'checked'}
      >
        ${task.completed ? 'Tarea completa' : 'Tarea pendiente'}
      </input>
    </li>
  `;
});

Acá mi solución al reto

            const tasks = [{
                title: 'cursos backend',
                state: true
            },
            {
                title: 'curso arrays',
                state: false
            }];
            tasks.forEach(task => {
                app.innerHTML += `<li>${task.title} - ${task.state} </li> <input type="checkbox" id ="task">`
            })

Lo que no logré hacer fue cambiar el valor del checkbox según si está seleccionado o no

const tasks = [
  {title:"Limpiar refrigeradora", description: "Ordenar y limpiar la puerta de la refrigeradora, ademas de limpiar la parte superior"},
  {title:"Limpiar la alacena", description: "Hacer limpieza profunda de la alacena, sacar las cosas viejas y vencidas.  También reorganizar mejor"},
  {title:"Terminar curso de arrays", description: "Continuar con el curso de Arrays para terminarlo mañana Domingo"}
]
const section = document.querySelector('section')
tasks.forEach(task => {
  section.innerHTML += `<h2 style="margin-top: 20px;"><input type="checkbox" style="margin-right: 10px;"/>${task.title}</h2>`
  section.innerHTML += `<h3>Descripción de la tarea</h3>`
  section.innerHTML += `<p>${task.description}</p>`
})
  • Captura :

  • Codigo :

const Lista = [
    {tarea: 'Estudiar', hora: 20 },
    {tarea: 'Comer', hora: 20},
    {tarea: 'Dormir', hora: 20},
    {tarea: 'Jugar', hora: 20},
    {tarea: 'Correr', hora: 20},
    {tarea: 'Pensar', hora: 20}
];

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

Lista.forEach(lista => {
    app.innerHTML += `<label><input type="checkbox" id="cbox1" value="first_checkbox">${lista.tarea} </label> <br>`
})

Excelente clase

<!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 tasklist = [
            {title: "task 1", description: "Estudiar estadistica", done:true},
            {title: "task 2", description: "Estudiar calculo", done:true},
            {title: "task 3", description: "Estudiar JavaScript", done:true},
        ]
        const app = document.getElementById('app');
        tasklist.forEach((item, done) => {
            let check;
            if(item.done == true) {
                check = 'checked';
            }
            app.innerHTML += `<li><Input type = "checkbox" ${check}/><label>${item.description}</label></li>`
        })
    </script>
</body>
</html>
const tareas = [
	{name: 'Botar Basura', isComplete: false},
	{name: 'Lavar Servicios', isComplete: false},
	{name: 'Ordenar Cuarto', isComplete: true},
	{name: 'Hacer Tareas', isComplete: true},
]

const app = document.getElementById('app')

tareas.forEach(({name,isComplete}) => {
	if(isComplete)
		app.innerHTML += `<li>${name} <input type="checkbox" checked></li>`
	else	
		app.innerHTML += `<li>${name} <input type="checkbox"></li>`
})

mi respuesta al reto 😄

<script>
        const $container = document.querySelector('.reto')
        const taskList = [
            {task: "do something1" , state: "true"},
            {task: "do something2" , state: "false"},
            {task: "do something3" , state: "true"},
            {task: "do something4" , state: "false"},
            {task: "do something5" , state: "true"}
        ]
        let labels = ''
        taskList.forEach(task => {
            if(task.state == 'true') {
                labels += `<li> ${task.task} <input type="checkbox" checked="${task.state}"/>`
            }else {
                labels += `<li> ${task.task} <input type="checkbox"/>`
            }
        })
        $container.innerHTML = labels
</script>

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

    const toDo = [
        {task: 'Tarea 1', completed: true},
        {task: 'Tarea 2', completed: false},
        {task: 'Tarea 3', completed: true},
        {task: 'Tarea 4', completed: false},
    ];
    toDo.forEach((task) => {
        app.innerHTML += `<li><input type="checkbox" ${task.completed === "true" && "checked"}> ${task.task}</li>`; 
    });

    </script>
</body>

También para renderizar el html de una forma más fácil, es click derecho en el IDE, y darle en la opción Open With Live Server

De este modo hice la solución del reto , recibo cualquier tipo de recomendación 😄

<!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>Curso manipulacion arrays</h1>
    <div id="app"></div>
    <script >
	const app = document.getElementById("app")


const taks = [
    { name:"Tarea de tecnologia" , tiempoDeEntrega: "20 dias" , estado:false  }, 
    {name:"Tarea de matematicas" , tiempoDeEntrega:"20 dias",  estado: true },
    {name:"Tarea de español" , tiempoDeEntrega: "20 dias" , estado:true}
]

taks.forEach(element => {
    if (element.estado === true) {
    	app.innerHTML += `<li><input type = "checkbox" 		checked>${element.name} - ${element.tiempoDeEntrega}<input> </li>`
    }else{
        app.innerHTML += `<li><input type = "checkbox">${element.name} - ${element.tiempoDeEntrega}<input> </li>`
    }
})
</script> 
</body>
</html>

Mi solución a la tarea:

const tasks = [
    { title: "Tarea 1", status: "completed" },
    { title: "Tarea 2", status: "completed" },
    { title: "Tarea 3", status: "Not completed" },
    { title: "Tarea 4", status: "Not completed" },
];

tasks.forEach((task) => {
    app.innerHTML += `<li><input type="checkbox" readonly ${
        task.status === "completed" && "checked"
    }>${task.title} </li>`;
});

Mi aporte😄, utilice el mismo archivo de HTML y replique el código que hicimos en el primero, solo le puse el input con la función de checkbox y ya quedó.

      const tasks = [
        { title: "Cooking👩‍🍳" },
        { title: "Wash the dishes🍽" },
        { title: "Do errands🏃‍♀️" },
      ];

      tasks.forEach((task) => {
        app.innerHTML += `
        <li>
          <input type="checkbox"/>
          ${task.title} 
          </li>
        `;
      });

Así quedó, no le puse otro elemento porque creo que ya cumple su función.

Mi solución

const taskList = [
            { title: 'step 1', status: true },
            { title: 'step 2', status: false },
            { title: 'step 3', status: true },
            { title: 'step 4', status: false },
            { title: 'step 5', status: true },
            { title: 'step 6', status: true },
        ]

        const generateHTML = (title, status) => {
            const name = document.createElement('span')
            name.textContent = `Nombre: ${title}`

            const checkbox = document.createElement('input')
            checkbox.type = 'checkbox'
            checkbox.checked = status 

            app.append(name, checkbox)
        }

        taskList.forEach( ({title, status}) => generateHTML(title, status) )

Mi solución al reto:

      const tasks = [
            {name: "bathroom clean", status: false},
            {name: "washing clothes", status: true},
            {name: "walking the dog", status: false},
            {name: "taking out the garbage", status: false},
            {name: "study hour", status: true}
        ];

        const tasksList = document.getElementById("tasks");
        tasks.forEach(task =>{
            if(task.status == true){
                tasksList.innerHTML += `<li>${task.name}</li>: <input type="checkbox" checked>${task.status}</input>`
            } else {
                tasksList.innerHTML += `<li>${task.name}</li>: <input type="checkbox">${task.status}</input>`
            }
        });

Mi solución al reto.

Aquí dejo mi solución:

<!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 tareas = ['Tarea 1','Tarea 2','Tarea 3']
        tareas.forEach( iten => {
            app.innerHTML += `<label>${iten}</label>
            <input type="checkbox">
            <br>`
            })
    </script>
</body>
</html>
div id="app"></div>
    <script>
        const toDo = [
            {task: 'Make my bed', complete: 'yes' },
            {task: 'Read a book', complete: 'no' },
            {task: 'Listen the popcast', complete: 'yes' },
        ];
        const app = document.getElementById('app');
        toDo.forEach(toDo => {
            app.innerHTML += `
            <label>
                    <input type="checkbox" is="cbox1">
                    ${toDo.task} - ${toDo.complete}
                <br />
            </label>`;
        })
    </script>

He realizado un taskList manejado por el usuario

const task = document.getElementById("task");
const submitTask = document.getElementById("submitTask");
const list = document.getElementById("list");
const taskList = [];
function agregar() {
  taskList.push([task.value]);
  list.innerHTML += `<li>${
    task.value
  }<input type="checkbox" id="${task.value.replace(/ /g, "")}" /> </li>`;
  taskList.forEach((objetos) => objetos.push("No empezado"));
  const objetoLista = Object.fromEntries(taskList);
  console.log(objetoLista);
}

Estoy pensando en como hacer la logica del check

Comparto mi resolución del desafío en código JS, acepto aportes de la comunidad, o bien dudas! Road to Code!

<script>
        const tasks = [
            { title: 'Eat pizza', status: true},
            { title: 'Go to park', status: true},

        ];
        const app = document.getElementById('app');
        tasks.forEach(task =>{
            app.innerHTML += `
            <input type="checkbox" ${(task.status == true) ? 'checked' : 'not-checked'}/><li>${task.title}</li>

            `;
        })
    </script>

Termine el reto

JS

const toDoList = [
    {name: "wash the roof", status: false },
    {name: "Finish GCloud21 Project" , status: true },
    {name: "Finish The Course", status: false },
    {name: "Finish JS Challenge" , status: false },
]

const DOMList = document.querySelector(".toDoList")


const createNewNode  = (name, status) =>{
    const newNode = document.createElement("input")
    newNode.value = name
    newNode.type = "checkbox"

    if(status === true){ 
        newNode.checked = true
    }else{
        newNode.checked = false
    }
    DOMList.append(newNode,name)
}

toDoList.forEach(toDo => {{
    createNewNode(toDo.name, toDo.status)
}})

DOMList.append(container)

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>
</head>
<body>
    <div id="app"></div>
    <section class="toDoList">
    </section>

    <script src="../server/01-forEach.js"></script>
</body>
</html>

Otra manera de reducir el número de veces que se interactua con el DOM, es usando documentFragment

const TASKS = [
 {
  title: 'Do my homework',
  completed: false,
 },
 {
  title: 'Take a nap',
  completed: true,
 },
 {
  title: 'Practice my english',
  completed: true,
 },
];

const app = document.querySelector('#app');
const wrapper = document.createDocumentFragment();

TASKS.forEach(({ title, completed }) => {
 const div = document.createElement('div');
 const span = document.createElement('span');
 const input = document.createElement('input');
 input.type = 'checkbox';
 input.checked = completed;
 span.textContent = title;

 div.append(span, input);
 wrapper.appendChild(div);
});

app.appendChild(wrapper);
       	
<!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="appProducts"></div>
  <div id="appTasks"></div>
  <script>
    const products = [{ title: 'Burger', price: 121.00 }, { title: 'Pizza', price: 20.00 }];
    const tasks = [{ title: 'Meet Plan X', done: false }, { title: 'Take Test', done: true }, { title: 'Course Manipulation of Arrays', done: false }];

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

    const appTasks = document.getElementById('appTasks');
    tasks.forEach((task, index) => {
      const element = `
         <li>
          	 <input
                     type='checkbox'
                     id='task-${index}'
                     name='${task.title}'
                     ${task.done && 'checked'} />
                  <label for='task-${index}'>${index + 1} - ${task.title}</label>
         </li>`;
      appTasks.insertAdjacentHTML('beforeend', element);
    });
  </script>
</body>

</html>

Buenas, excelente primer método que reemplaza al clásico for especializado en arrays.
.
Adicionalmente se puede recibir además del elemento leído en cada iteración, el index en ese momento del loop para realizar distintas acciones que podríamos llegar a necesitar, de la siguiente manera:

forEach( (element, index) => { 
	//nuestro código
	console.log('Posicion: ', index - element);
} )

Me sirvio para utilizarlo en mi resolución del reto, dejo la documentación a mano: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
.
Mi solución:

<body>
    <div id="TodoApp">
        <h1>To Do List</h1>
        <ul id="TodoList"></ul>
    </div>
    <script>
        const todoList = [
            {todoName: 'Buy Milk', state: true },
            {todoName: 'Buy some Chocolate', state: false },
            {todoName: 'Buy a car', state: true },
            {todoName: 'Make dreams reality', state: false },
        ];

        let todoListNode = document.getElementById('TodoList');

        todoList.forEach((todoItem, index) => {
            todoListNode.innerHTML += `<li><label><input type="checkbox" ${todoItem.state ? 'checked' : ''} > To Do #${++index} - ${todoItem.todoName}</label></li>`;
        })
    </script>
</body>

A continuación, comparto la solución al reto propuesto:

<div id="tareas"></div>
    <script>
        const task = [
            { title: 'Hacer un array de tareas', status: true},
            { title: 'Codificar el array', status: true },
            { title: 'Ver el siguiente video del curso', status: false },
        ];

        const tareas = document.getElementById('tareas');
                   task.forEach(element => {

                        tareas.innerHTML += 
                       `<li> ${element.title} : <input type="checkbox" ${element.status && 'checked'}/> </li>`;
       }) 
    </script>