CYF-WORKSHOP/ Button

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

@@ -1,3 +1,5 @@
+import { Header } from "./header";
+import { main } from "./main";
 //increments the number in a node's text
 function increment(node) {
   let current = node.textContent;
@@ -7,19 +9,10 @@ function increment(node) {
 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);
+  body.appendChild(Header());
 
-  const main = document.createElement("main");
-  main.innerHTML = `
-        <p id="counter" data-testid="counter">0</p>
-        <button id="increment">Increment</button>
-    `;
-  body.appendChild(main);
+
+  body.appendChild(main());
 
   const button = body.querySelector("#increment");
   const counter = body.querySelector("#counter");

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

@@ -0,0 +1,9 @@
+
+export function Header(){
+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,10 @@
+export function main(){
+
+const main = document.createElement("main");
+main.innerHTML = `
+      <p id="counter" data-testid="counter">0</p>
+      <button id="increment">Increment</button>
+  `;
+return main;
+}
+