From 342a4b6d6a6c37a48af7ad3e30fb2b81d1ffce23 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Fri, 24 Jul 2026 23:22:38 +0100 Subject: [PATCH 1/6] 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 Date: Sat, 25 Jul 2026 00:30:18 +0100 Subject: [PATCH 2/6] 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 = ` -

Number Counter

-

A simple counter. Press increment to increase the count by one.

- `; + const header = Header(); + const main = Main(); body.appendChild(header); - - const main = document.createElement("main"); - main.innerHTML = ` -

0

- - `; 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 = ` +

Number Counter

+

A simple counter. Press increment to increase the count by one.

+ `; + 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 = ` +

0

+ + `; + return main; +} From 1ec12861dc75ed452db4d20565084a37027919e5 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Sat, 25 Jul 2026 01:20:31 +0100 Subject: [PATCH 3/6] Add decrement button and functionality --- .../tasks/buttons-and-counter/src/app.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 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..d7dbf53 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 = `

Number Counter

-

A simple counter. Press increment to increase the count by one.

+

A simple counter. Press increment to increase the count or decrement to decrease the count.

`; body.appendChild(header); @@ -18,14 +22,21 @@ export function App() { main.innerHTML = `

0

+ `; body.appendChild(main); - const button = body.querySelector("#increment"); + const buttonIncrement = body.querySelector("#increment"); + const buttonDecrement = body.querySelector("#decrement"); const counter = body.querySelector("#counter"); - button.addEventListener("click", () => { + + buttonIncrement.addEventListener("click", () => { increment(counter); }); + buttonDecrement.addEventListener("click", () => { + decrement(counter); + }); + return body; } From 72204877a56aca98983239a3a6fba48edf4cdfa5 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Sat, 25 Jul 2026 01:25:10 +0100 Subject: [PATCH 4/6] Enable decrement button tests --- .../tasks/buttons-and-counter/test/app.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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); }); }); From b096448f3d95868ad91ec955f1e95e8782e31773 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Sat, 25 Jul 2026 11:30:05 +0100 Subject: [PATCH 5/6] Add available option to profile preview component --- .../src/profilePreview.js | 26 ++++++++++++++----- .../test/profilePreview.test.js | 6 ++--- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js b/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js index b1778b4..0732d7c 100644 --- a/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js +++ b/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js @@ -1,6 +1,17 @@ -export function ProfilePreview(profile) { +export function ProfilePreview(profile, options = {}) { const preview = document.createElement("aside"); + const { available = true, shortForm = false } = options; + + if (!available) { + const message = document.createElement("p"); + message.textContent = "Profile preview unavailable"; + + preview.appendChild(message); + + return preview; + } + const picture = document.createElement("img"); picture.src = profile.pictureSrc; picture.alt = ""; @@ -10,13 +21,16 @@ export function ProfilePreview(profile) { name.textContent = profile.name; name.dataset.testid = "profileName"; - const bio = document.createElement("p"); - bio.textContent = profile.bio; - bio.dataset.testid = "profileBio"; - preview.appendChild(picture); preview.appendChild(name); - preview.appendChild(bio); + + if (!shortForm) { + const bio = document.createElement("p"); + bio.textContent = profile.bio; + bio.dataset.testid = "profileBio"; + + preview.appendChild(bio); + } return preview; } diff --git a/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js b/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js index 8e50cec..4f14257 100644 --- a/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js +++ b/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js @@ -31,7 +31,7 @@ describe("profile preview", () => { }); }); - describe.skip("available option", () => { + describe("available option", () => { test("only notice that preview is unavailable is displayed with shortform on, available off", () => { const profile = { pictureSrc: "/null", @@ -47,7 +47,7 @@ describe("profile preview", () => { expect(container.childElementCount).toBe(1); expect(container.children[0]).toHaveTextContent( - "Profile preview unavailable" + "Profile preview unavailable", ); }); @@ -66,7 +66,7 @@ describe("profile preview", () => { expect(container.childElementCount).toBe(1); expect(container.children[0]).toHaveTextContent( - "Profile preview unavailable" + "Profile preview unavailable", ); }); }); From e146fb9f16d720f760aed72a952e6a737e4938bd Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Sat, 25 Jul 2026 11:37:40 +0100 Subject: [PATCH 6/6] shortform --- .../tasks/conditional-rendering/src/profilePreview.js | 11 ++++++++--- .../conditional-rendering/test/profilePreview.test.js | 6 +++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js b/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js index b1778b4..8a9e031 100644 --- a/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js +++ b/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js @@ -1,4 +1,5 @@ -export function ProfilePreview(profile) { +export function ProfilePreview(profile, options = {}) { + const { shortForm = false } = options; const preview = document.createElement("aside"); const picture = document.createElement("img"); @@ -16,7 +17,11 @@ export function ProfilePreview(profile) { preview.appendChild(picture); preview.appendChild(name); - preview.appendChild(bio); - + if (shortForm === false) { + const bio = document.createElement("p"); + bio.textContent = profile.bio; + bio.dataset.testid = "profileBio"; + preview.appendChild(bio); + } return preview; } diff --git a/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js b/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js index 8e50cec..faae6a9 100644 --- a/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js +++ b/dom-merge-conflict/tasks/conditional-rendering/test/profilePreview.test.js @@ -47,7 +47,7 @@ describe("profile preview", () => { expect(container.childElementCount).toBe(1); expect(container.children[0]).toHaveTextContent( - "Profile preview unavailable" + "Profile preview unavailable", ); }); @@ -66,12 +66,12 @@ describe("profile preview", () => { expect(container.childElementCount).toBe(1); expect(container.children[0]).toHaveTextContent( - "Profile preview unavailable" + "Profile preview unavailable", ); }); }); - describe.skip("short form option", () => { + describe("short form option", () => { test("contains profile info except the bio with shortform on", () => { const profile = { pictureSrc: "/picture",