Split-app-components

dom-merge-conflict/tasks/buttons-and-counter/src/app.js

@@ -1,31 +1,14 @@
-//increments the number in a node's text
-function increment(node) {
-  let current = node.textContent;
-  node.textContent = Number(current) + 1;
-}
+import { createHeader } from "./header.js";
+import { createMain } from "./main.js";
 
 export function App() {
   const body = document.createElement("body");
 
-  const header = document.createElement("header");
-  header.innerHTML = `
-        <h1>Number Counter</h1>
-        <p>A simple counter. Press increment to increase the count by one.</p>
-    `;
-  body.appendChild(header);
+  const header = createHeader();
+  const main = createMain();
 
-  const main = document.createElement("main");
-  main.innerHTML = `
-        <p id="counter" data-testid="counter">0</p>
-        <button id="increment">Increment</button>
-    `;
+  body.appendChild(header);
   body.appendChild(main);
 
-  const button = body.querySelector("#increment");
-  const counter = body.querySelector("#counter");
-  button.addEventListener("click", () => {
-    increment(counter);
-  });
-
   return body;
 }

dom-merge-conflict/tasks/buttons-and-counter/src/header.js

@@ -0,0 +1,8 @@
+export function createHeader() {
+    const header = document.createElement("header");
+    header.innerHTML = `
+      <h1>Number Counter</h1>
+      <p>A simple counter. Press increment to increase the count by one.</p>
+    `;
+    return header;
+  }

dom-merge-conflict/tasks/buttons-and-counter/src/main.js

@@ -0,0 +1,22 @@
+function increment(node) {
+    const current = node.textContent;
+    node.textContent = Number(current) + 1;
+  }
+
+  export function createMain() {
+    const main = document.createElement("main");
+    main.innerHTML = `
+      <p id="counter" data-testid="counter">0</p>
+      <button id="increment">Increment</button>
+    `;
+
+    const button = main.querySelector("#increment");
+    const counter = main.querySelector("#counter");
+
+    button.addEventListener("click", () => {
+      increment(counter);
+    });
+
+    return main;
+  }
+