Array.from - DOM Elements(NodeList)

pktcodes · pktcodes · commit ecb6c69daec8 · 2023-03-29T22:53:52.000-05:00
diff --git a/app.js b/app.js
@@ -3,16 +3,19 @@
 // from - returns Array Object from any object with a length property or an iterable object
 // from turns array-like/ish into array - string,nodeList,Set
 
-/* String */
-const person = "peter";
-console.log(Array.from(person));
+const paragraphs = document.querySelectorAll("p");
+const result = document.getElementById("result");
+const second = document.getElementById("second");
 
-/* Arguments */
-function countTotal() {
-  console.log(arguments);
-  let total = Array.from(arguments).reduce(
-    (total, current) => (total += current)
-  );
-  console.log("Total:", total);
-}
-countTotal(20, 30, 40, 100);
+let text = Array.from(paragraphs);
+text = text
+  .map((item) => {
+    return `<span>${item.textContent}</span>`;
+  })
+  .join(" ");
+result.innerHTML = text;
+
+const newText = Array.from(document.querySelectorAll("p"), (item) => {
+  return `<span>${item.textContent}</span>`;
+}).join(" ");
+second.innerHTML = newText;
diff --git a/index.html b/index.html
@@ -11,11 +11,13 @@
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
-    <h1>ES6</h1>
-    <h1>JavaScript</h1>
-    <h1>CSS</h1>
-    <h1>HTML</h1>
+    <h1 style="text-align: center">ES6</h1>
+    <p>john</p>
+    <p>susan</p>
+    <p>peter</p>
     <h2 id="result"></h2>
+    <h1 id="second"></h1>
+
     <!-- Link to JavaScript -->
     <script src="./app.js"></script>
   </body>
diff --git a/styles.css b/styles.css
@@ -5,7 +5,6 @@ body {
 }
 
 h1 {
-  text-align: center;
   letter-spacing: 2px;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@ body {`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`h1 {`
`8`		`- text-align: center;`
`9`	`8`	`letter-spacing: 2px;`
`10`	`9`	`}`
`11`	`10`