From 9ec31141e22eaa59bfa2a32289da17d747f19b12 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 25 Jul 2026 11:11:38 +0100
Subject: [PATCH 1/2] header and main has been split from app.js into their own
 files

---
 .../tasks/buttons-and-counter/src/app.js             | 12 +-----------
 .../tasks/buttons-and-counter/src/header.js          |  5 +++++
 .../tasks/buttons-and-counter/src/main.js            |  5 +++++
 3 files changed, 11 insertions(+), 11 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/app.js b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
index af608eb..3125e4a 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
@@ -5,20 +5,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);
-
-  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
new file mode 100644
index 0000000..b608472
--- /dev/null
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
@@ -0,0 +1,5 @@
+const header = document.createElement("header");
+header.innerHTML = `
+        <h1>Number Counter</h1>
+        <p>A simple counter. Press increment to increase the count by one.</p>
+    `;
\ No newline at end of file
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..b28bdc1
--- /dev/null
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
@@ -0,0 +1,5 @@
+const main = document.createElement("main");
+main.innerHTML = `
+        <p id="counter" data-testid="counter">0</p>
+        <button id="increment">Increment</button>
+    `;
\ No newline at end of file

From 7b2709860e987dffc90550b0cf9891d049ed342f Mon Sep 17 00:00:00 2001
From: Rizqah <popoolarisquat@gmail.com>
Date: Sat, 25 Jul 2026 11:18:31 +0100
Subject: [PATCH 2/2] unskip tests and decrement counter added and header
 updated

---
 .../tasks/buttons-and-counter/src/app.js             | 12 +++++++++++-
 .../tasks/buttons-and-counter/test/app.test.js       |  6 +++---
 2 files changed, 14 insertions(+), 4 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..d5945bb 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
@@ -3,6 +3,10 @@ function increment(node) {
   let current = node.textContent;
   node.textContent = Number(current) + 1;
 }
+function decrement(node) {
+  let current = node.textContent;
+  node.textContent = Number(current) - 1;
+}
 
 export function App() {
   const body = document.createElement("body");
@@ -10,7 +14,7 @@ export function App() {
   const header = document.createElement("header");
   header.innerHTML = `
         <h1>Number Counter</h1>
-        <p>A simple counter. Press increment to increase the count by one.</p>
+        <p>A simple counter. Press decrement to decrease the count by one.</p>
     `;
   body.appendChild(header);
 
@@ -27,5 +31,11 @@ export function App() {
     increment(counter);
   });
 
+  const button = body.querySelector("#decrement");
+  const counter = body.querySelector("#counter");
+  button.addEventListener("click", () => {
+    decrement(counter);
+  });
+
   return body;
 }
diff --git a/dom-merge-conflict/tasks/buttons-and-counter/test/app.test.js b/dom-merge-conflict/tasks/buttons-and-counter/test/app.test.js
index 1139e45..451f7cd 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/test/app.test.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/test/app.test.js
@@ -17,7 +17,7 @@ describe("button and counter", () => {
 
   test("contains description paragraph with mention of 'increment' in header", () => {
     expect(
-      container.querySelector("header").querySelector("p")
+      container.querySelector("header").querySelector("p"),
     ).toHaveTextContent(/increment/i);
   });
 
@@ -35,7 +35,7 @@ describe("button and counter", () => {
     expect(getByTestId(container, "counter")).toHaveTextContent(/^2$/);
   });
 
-  describe.skip("decrement button", () => {
+  describe("decrement button", () => {
     test("pressing Decrement decreases the counter", () => {
       const button = getByRole(container, "button", {
         name: "Decrement",
@@ -49,7 +49,7 @@ describe("button and counter", () => {
 
     test("contains description paragraph with mention of 'decrement' in header", () => {
       expect(
-        container.querySelector("header").querySelector("p")
+        container.querySelector("header").querySelector("p"),
       ).toHaveTextContent(/decrement/i);
     });
   });