chore: refactor DOM injection logic

Author: msmfa

src/main.js

@@ -1,43 +1,35 @@
 import { definitions } from "./data.js";
 
-// the left hand side panel that contains the list of
-// links to be clicked
+// the left hand side panel that contains the list of links to be clicked
 const sectionLeft = document.querySelector(".section-left");
 
-sectionLeft.addEventListener("click", function (e) {
-  const sectionRight = document.querySelector(".section-right");
-
-  const mainText = definitions
-    .map((item) => {
-      if (item.title === e.target.id) return item.text;
-    })
-    .join("");
-
-  const exampleImage = definitions
-    .map((item) => {
-      if (item.title === e.target.id)
-        return '<img class ="images"src="' + item.image + '">';
-    })
-    .join("");
-
-  const listText = definitions
-    .map((item) => {
-      if (item.title === e.target.id) return item.bulletPointItems;
-    })
-    .join("");
-
-  const bulletPointText = displayTextAsList(listText);
-  displayContent(sectionRight, mainText, bulletPointText, exampleImage);
-});
-
-function displayContent(display, mainText, bulletPointText, exampleImage) {
-  display.innerHTML = `<div class='def-text'>${mainText}</div><div class="bullet-text">${bulletPointText}</div>${exampleImage}`;
+/** Render a DOM element with dynamic props generated by the values
+ * in definitions
+ */
+function renderHTML(DOMElement, text, bulletPointText, image) {
+  DOMElement.innerHTML = `<div class='def-text'>${text}</div><div class="bullet-text">${bulletPointText}</div>${image}`;
 }
 
-function displayTextAsList(listText) {
-  return listText
+function renderBulletPointsAsList(bulletPoints) {
+  return bulletPoints
     .split(".")
     .slice(0, -1)
-    .map((item) => `<li class='list'>${item}</li>`)
+    .map((bulletPoint) => `<li class='list'>${bulletPoint}</li>`)
     .join("");
 }
+
+// when the user clicks on a link in the left panel update the DOM
+sectionLeft.addEventListener("click", function (e) {
+  const sectionRight = document.querySelector(".section-right");
+  const selectedValue = e.target.id;
+  const selectedDefinition = definitions.find(
+    ({ title }) => title === selectedValue
+  );
+
+  const { image: imageUrl, text, bulletPointItems } = selectedDefinition;
+
+  const HTMLImage = `<img class ="images"src=${imageUrl}>`;
+  const HTMLBulletPoints = renderBulletPointsAsList(bulletPointItems);
+
+  renderHTML(sectionRight, text, HTMLBulletPoints, HTMLImage);
+});