update

last-endcode · last-endcode · commit f804e1682f77 · 2021-01-25T09:46:44.000+07:00
diff --git a/modules/01_setup copy.js b/modules/01_setup copy.js
@@ -0,0 +1,27 @@
+// import file dari export ke sini
+import { people, random } from './utils/data.js';
+
+const container = document.querySelector('.container');
+const btn = document.querySelector('.btn');
+
+// addEvent if clicked
+btn.addEventListener('click', () => {
+  showPeople();
+});
+
+const showPeople = () => {
+  const newPeople = people
+    .map((person) => {
+      // console.log(person); ktika diklik mnghasilkan smua obj dalam people
+      // use destruct
+      const { name, job } = person;
+      return `<p>${name.toUpperCase()} <strong>${job.toUpperCase()}</strong></p>`;
+    })
+    .join(' ');
+  // console.log(newPeople); just for check
+  container.innerHTML = newPeople;
+  // otmatis ketika diklik menghasilkan sesuai obj people
+  // JOHN DEVELOPER
+  // BOBY DESIGNER
+  // JANE THE BOSS
+};
diff --git a/modules/01_setup.js b/modules/01_setup.js
@@ -1,27 +1,11 @@
 // import file dari export ke sini
 import { people, random } from './utils/data.js';
+import showPeople from './utils/showPeople.js';
 
 const container = document.querySelector('.container');
 const btn = document.querySelector('.btn');
 
 // addEvent if clicked
 btn.addEventListener('click', () => {
-  showPeople();
+  container.innerHTML = showPeople(people);
 });
-
-const showPeople = () => {
-  const newPeople = people
-    .map((person) => {
-      // console.log(person); ktika diklik mnghasilkan smua obj dalam people
-      // use destruct
-      const { name, job } = person;
-      return `<p>${name.toUpperCase()} <strong>${job.toUpperCase()}</strong></p>`;
-    })
-    .join(' ');
-  // console.log(newPeople); just for check
-  container.innerHTML = newPeople;
-  // otmatis ketika diklik menghasilkan sesuai obj people
-  // JOHN DEVELOPER
-  // BOBY DESIGNER
-  // JANE THE BOSS
-};
diff --git a/modules/utils/showPeople.js b/modules/utils/showPeople.js
@@ -0,0 +1,11 @@
+const showPeople = (people) => {
+  const newPeople = people
+    .map((person) => {
+      const { name, job } = person;
+      return `<p>${name.toUpperCase()} <strong>${job.toUpperCase()}</strong></p>`;
+    })
+    .join(' ');
+  return newPeople;
+};
+
+export default showPeople;
