ForEach

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 😃

Jose Saúl Guerrero Serrano

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

Alfredo Olmedo

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

Joel Moises Boada Velasquez

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>

Gustavo Adolfo Perez Ramos

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

Natalia Ortiz Maldonado

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

Kevin Alexander Chari Castillo

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

diego rodriguez

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!

Madeliy Ricra Gutierrez

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>

Leoneider Trigos Guerrero

Lanzar http-server:

npx http-server client

Omar Barragán moreno

David Saavedra Vázquez

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.

Fredy Daniel Flores Lemus

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>

David Saavedra Vázquez

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

Juan Gui Arenas

😮 Genial, no sabia lo poderoso que es ForEach

Gonzalo Ceron Denetro

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

EDCarlitosxD

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>

José fabian Grijalba rativa


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

Darwing Steven Sánchez Londoño

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

Miguel Ángel Reyes Moreno

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

Reinaldo Omar Mendoza Leal

Tambien existe la opcion de usar

for (elemento in elementos) {
	// hacer algo
}

Leonardo Alain

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

Bramucci Candela

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)

Nicolas Erices Mendez

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

alidhasem

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>

Andres Robles

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

dannielrazo

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>

Gonzalo Palacios

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

Agustina Corvo

hace 3 días

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>

Camilo Andrés Pimentel Gomez

hace 7 días

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

Pablo Guallichico

hace 13 días

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

Gilbert Ardila

hace 13 días

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

Eufanzky

hace 18 días


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

Dario Paladines

hace 19 días

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)

Dario Paladines

hace 19 días

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>

Fernando Pioli Martínez

hace 20 días

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;

Wilberk Ledezma

hace 22 días

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

Carlos Florez

hace un mes

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

Alex Stefano Falcon Flores

hace un mes

😊 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);

Rodrigo Alex Ayelef Huilipan

hace un mes

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!

Federico Maidana

Así me quedo a mi:

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

Luis Gómez ojeda

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

Captura de pantalla 2022-04-07 232418.png

Leonardo Moreno Faberón

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>

Norma Yamileth Diaz Escobar

Luis Berenguer

RETO

Kimberly Vargas

Alejandro Ivan Mendieta

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

Marcos Perez

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

Captura de pantalla de 2022-03-21 14-08-57.png

Marcos Perez

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

Captura de pantalla de 2022-03-21 13-54-29.png

José Alberto Ramírez Quiroz

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

José Alberto Ramírez Quiroz

// 2 Lineas de codigo nomas :)
const letters = ['a','b','c','d']
letters.forEach(e => console.log(e))

Miguel Ángel Baquero Tello

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.

José Mota

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)

Marcos Perez

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>

Diego Esteban Diaz Vivas

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>

Orlando Díaz Torrealva

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

Cristian Contreras

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>

Juan Nicolas hernandez Chavez

Carlos Abad Garcia Perez

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

(

Diego Alejandro Presiga

Esta fue mi solución al reto:

Resultado:

Jhon_B

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>

JOSE MARIO ANGEL GARCIA SANDOVAL

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

jonathan gonzalez

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

Axel Enrique Galeed Gutierrez

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>

Andrés Felipe Lopez gomez

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

Teo Nabot

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/>"
    }
})
>

Diego Andres Valderruten Vargas


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

Francisco Israel Jimenez Ramirez

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__/----------- */```

Luis Enrique Carrera Valle

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

Diego Fernando Caviedes Camaho

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

Danny Pacheco

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>

Rodrigo Josue Goitia Quiroga

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

Sebastián Fernández Morales

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

Rodrigo Ramos Xochiteotzin

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

Gustavo Gonzalez Montero

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

fredic yohany rojas

Lautaro Facundo Costa Peralta

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

Brandon Argel Verdeja Dominguez

Excelente clase

Edinson Ventura Flores

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

Jeremy Palomino

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

Sergio Maximiliano Salvatierra

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>

bryan roca

Keilyn Francela Mena Gutiérrez

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

Camilo Alvarez Avila

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

Miguel Giraldo

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>

Erasmo Hernández

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

Bryan Hernandz

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.

goide

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

Kevin Acevedo

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

Ángel David Vargas Hernández

Mi solución al reto.

Miguel Angel

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>

Sebastian Moreno Olivera

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>

Clair

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

Franco Borgiani

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>

Gabriel Hernández Valdez

Termine el reto

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>

Zajith Corro Viveros

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

Luis Rangel Castro

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

Luis Rangel Castro

Code Runner

Lucas Frezzini

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>

juanma_9206