updated categories

src/js/modules/chooser.js

@@ -12,12 +12,13 @@ export default function () {
   const resultsEl = document.querySelector(".js-chooser-results");
 
   const colourArray = [
-    { name: "Yellow", colour: "text-yellow-300" },
-    { name: "Dark Blue", colour: "text-blue-700" },
-    { name: "Light Blue", colour: "text-blue-300" },
-    { name: "Orange", colour: "text-yellow-500" },
-    { name: "Green", colour: "text-green-600" },
-    { name: "Red", colour: "text-red-500" },
+    { name: "Person", colour: "text-yellow-300" },
+    { name: "World", colour: "text-blue-700" },
+    { name: "Object", colour: "text-blue-300" },
+    { name: "Action", colour: "text-yellow-500" },
+    { name: "Nature", colour: "text-green-600" },
+    { name: "Random", colour: "text-red-500" },
+    { name: "♠", colour: "text-gray-900" },
   ];
 
   window.addEventListener("DOMContentLoaded", () => {
@@ -29,13 +30,11 @@ export default function () {
   function newColour() {
     const randomItem =
       colourArray[Math.floor(Math.random() * colourArray.length)];
-    copyEl.innerHTML = `<p>Your Colour is: <span class="text-3xl font-medium ${randomItem.colour}">${randomItem.name}</span></p>`;
+    copyEl.innerHTML = `<p>Your category is: <span class="text-3xl font-medium ${randomItem.colour}">${randomItem.name}</span></p>`;
 
     const theDate = format(new Date(), "HH:mm:ss");
     const newListItem = document.createElement("li");
-    newListItem.appendChild(
-      document.createTextNode(`${theDate} - ${randomItem.name}`)
-    );
+    newListItem.innerHTML = `${theDate} - ${randomItem.name}`;
     resultsEl.prepend(newListItem);
   }
 }