From 342a4b6d6a6c37a48af7ad3e30fb2b81d1ffce23 Mon Sep 17 00:00:00 2001
From: Sandani Kannangara <sandz.kannangara@gmail.com>
Date: Fri, 24 Jul 2026 23:22:38 +0100
Subject: [PATCH 1/2] created header and main file

---
 dom-merge-conflict/tasks/buttons-and-counter/src/header.js | 0
 dom-merge-conflict/tasks/buttons-and-counter/src/main.js   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 dom-merge-conflict/tasks/buttons-and-counter/src/header.js
 create mode 100644 dom-merge-conflict/tasks/buttons-and-counter/src/main.js

diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/header.js b/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
new file mode 100644
index 0000000..e69de29
diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/main.js b/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
new file mode 100644
index 0000000..e69de29

From f656c3871e9be429e376ca75ab8c49031ca52857 Mon Sep 17 00:00:00 2001
From: Sandani Kannangara <sandz.kannangara@gmail.com>
Date: Sat, 25 Jul 2026 00:30:18 +0100
Subject: [PATCH 2/2] Split app into header and main components

---
 .../tasks/buttons-and-counter/src/app.js        | 17 +++++------------
 .../tasks/buttons-and-counter/src/header.js     |  8 ++++++++
 .../tasks/buttons-and-counter/src/main.js       |  8 ++++++++
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/app.js b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
index af608eb..bcdf9f9 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
@@ -1,3 +1,6 @@
+import { Header } from "./header.js";
+import { Main } from "./main.js";
+
 //increments the number in a node's text
 function increment(node) {
   let current = node.textContent;
@@ -6,19 +9,9 @@ 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>
-    `;
+  const header = Header();
+  const main = Main();
   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);
 
   const button = body.querySelector("#increment");
diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/header.js b/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
index e69de29..7f1d114 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
@@ -0,0 +1,8 @@
+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;
+}
diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/main.js b/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
index e69de29..92a2b76 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
@@ -0,0 +1,8 @@
+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;
+}