Colour seed phrase words

website/index.js

@@ -9,7 +9,15 @@ const main = async () => {
   const bits = document.querySelector('.bits');
   const regenerateSeedButton = document.querySelector('.regenerate-seed');
 
-  const generateSeed = () => seedText.innerText = dogeSeed(bits.value);
+  const generateSeed = () => {
+    const seedPhrase = dogeSeed(bits.value);
+    const wrappedSeedPhrase = seedPhrase
+      .split(' ')
+      .map(word => `<span>${word}</span>`)
+      .join(' ');
+
+    seedText.innerHTML = wrappedSeedPhrase;
+  };
 
   regenerateSeedButton.addEventListener('click', generateSeed);
   bits.addEventListener('input', generateSeed);

website/style.css

@@ -33,6 +33,55 @@ body {
   font-family: "Comic Sans MS", cursive, sans-serif;
 }
 
+.generator .seed-text span:nth-of-type(1),
+.generator .seed-text span:nth-of-type(2) {
+  color: red;
+}
+.generator .seed-text span:nth-of-type(3),
+.generator .seed-text span:nth-of-type(4) {
+  color: blue;
+}
+.generator .seed-text span:nth-of-type(5),
+.generator .seed-text span:nth-of-type(6) {
+  color: orange;
+}
+.generator .seed-text span:nth-of-type(7),
+.generator .seed-text span:nth-of-type(8) {
+  color: yellow;
+}
+.generator .seed-text span:nth-of-type(9),
+.generator .seed-text span:nth-of-type(10) {
+  color: olive;
+}
+.generator .seed-text span:nth-of-type(11),
+.generator .seed-text span:nth-of-type(12) {
+  color: green;
+}
+.generator .seed-text span:nth-of-type(13),
+.generator .seed-text span:nth-of-type(14) {
+  color: purple;
+}
+.generator .seed-text span:nth-of-type(15),
+.generator .seed-text span:nth-of-type(16) {
+  color: fuchsia;
+}
+.generator .seed-text span:nth-of-type(17),
+.generator .seed-text span:nth-of-type(18) {
+  color: limegreen;
+}
+.generator .seed-text span:nth-of-type(19),
+.generator .seed-text span:nth-of-type(20) {
+  color: teal;
+}
+.generator .seed-text span:nth-of-type(21),
+.generator .seed-text span:nth-of-type(22) {
+  color: LightSeaGreen;
+}
+.generator .seed-text span:nth-of-type(23),
+.generator .seed-text span:nth-of-type(24) {
+  color: maroon;
+}
+
 .description {
   padding: 1em 0;
 }