metodo foreach, revisado hasta clase platzi#2 y reto culminado

CamSandoval · CamSandoval · commit cb367423cb8b · 2023-03-24T22:24:21.000-05:00
diff --git a/client/01_for_each.html b/client/01_for_each.html
@@ -0,0 +1,22 @@
+<!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: 'Burquer',price: 120},
+            {title: 'Pizza',price: 20}
+        ];
+        const app = document.querySelector('#app');
+        products.forEach(item =>{
+            app.innerHTML += `<li> ${item.title} __ ${item.price} </li>`
+        })
+    </script>
+</body>
+</html>
diff --git a/retos/ForEach.html b/retos/ForEach.html
@@ -0,0 +1,91 @@
+<!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>
+        @import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Open+Sans&family=Permanent+Marker&family=Quicksand:wght@300;500;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&family=Open+Sans&family=Permanent+Marker&family=Quicksand:wght@300;500;700&display=swap');
+
+        body{
+            background-color: bisque;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+        }
+        .title{
+            font-family: 'Delicious Handrawn', cursive;
+        }
+
+        .tasks{
+            font-family: 'Edu NSW ACT Foundation', cursive;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            height: 500px;
+            width: 400px;
+            background-color: rgba(223, 223, 214, 0.986);
+            border: solid 1px black;
+            border-radius: 10px;
+        }
+        .date{
+            padding: 0 20px;
+        }
+        .task_container{
+            padding: 0 20px;
+            display: flex;
+            flex-direction: column;
+        }
+        .task_container li{
+            list-style: none;
+            margin: 12px 0;
+        }
+    </style>
+</head>
+<body>
+    <h2 class="title">TO DO LIST</h2>
+
+    <div class="tasks">
+
+        <div class="date">
+            <h3>DATE</h3>
+            <input type="date" class="revision">
+        </div>
+    </div>
+    <script>
+
+        //const body = document.querySelector('body');
+        const tasksContainer = document.querySelector('.tasks');
+        const task = document.createElement('ul');
+        task.classList.add('task_container');
+        tasksContainer.append(task);
+
+        const taskList =[{
+            value:'Hacer un html'
+        },
+        {
+            value:'Escribir un libro'
+        },
+        {
+            value:'Crear un sistema operativo'
+        }]
+
+        taskList.forEach(item=>{
+            const list = document.createElement('li');
+            const checkbox = document.createElement('input');
+            checkbox.setAttribute('type','checkbox');
+            checkbox.classList.add('task');
+
+            const value = document.createElement('label');
+            value.setAttribute('for','task');
+            value.innerText = item.value;
+            list.append(checkbox,value)
+
+            task.append(list)
+        })
+    </script>
+</body>
+</html>
diff --git a/server/01_for_each.js b/server/01_for_each.js
@@ -0,0 +1,16 @@
+// FOREACH: Es un metodo de manipulación de arrays que nos permite recorrer cada uno de los elementos de este de una manera mas sencilla y con una sintaxis mas limpia
+
+const letters= ['a','b','c'];
+
+//Su funcion es basicamente generar un ciclo que hara lo que se le pida pero con cada una de las partes del array
+for (let index = 0; index < letters.length; index++) {
+    const element = letters[index];
+    console.log('for : ',element);//for:  a for:  b for:  c
+}
+
+//FOREACH
+    // item es una  palabra de identificacion, puede ser cambiada por cualquer otras
+letters.forEach(item => {
+    console.log('foreach :',item);//foreach: a  foreach: b  foreach: c
+})
+
