'Random Background Color Changer' fix: darkColorsArr[] (step 6)

Author: AndriiKot

README.md

@@ -114,6 +114,29 @@ In this project, you will help CamperBot build a random background color changer
         Fix the <code>document.querySelector("bg-hex-code")</code> line so that it correctly selects the element with the <code>id</code> of <code>bg-hex-code</code>.
       </p>
   </details>
+  <details>
+  <summary>
+    <h5>Step 6</h5>
+  </summary>
+      <p>
+        CamperBot has now created a function called <code>changeBackgroundColor</code> that changes the background color of the page to a random color from the <code>darkColorsArr</code> array. The function also displays the hex code for that new color.
+      </p>
+      <p>
+        When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+      </p>
+      <details>
+        <summary>
+          <h5>Example Code</h5>
+        </summary>
+        <code>Hex Code: undefined</code>
+      </details>
+      <p>
+        <code>undefined</code> is showing up here because the <code>color</code> variable is not being set correctly.
+      </p>
+      <p>
+        Fix the error in the <code>darkColorsArr[getRandomIndex]</code> line so that the color variable is set to a random color from the <code>darkColorsArr</code> array.
+      </p>
+    </details>
 </details>
 
 #### preview
@@ -248,15 +271,21 @@ const darkColorsArr = [
 ];
 
 function getRandomIndex() {
-  console.log(Math.floor(darkColorsArr.length * Math.random()));
+  const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+  return randomIndex;
 }
 
-getRandomIndex();
-
 const body = document.querySelector("body");
 const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
 
-console.log(bgHexCodeSpanElement);
+function changeBackgroundColor() {
+  const color = darkColorsArr[getRandomIndex()];
+
+  bgHexCodeSpanElement.innerText = color;
+  body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();
 ```
 
 [back to top](#top)

__0__title__/README.md

@@ -114,8 +114,32 @@ In this project, you will help CamperBot build a random background color changer
         Fix the <code>document.querySelector("bg-hex-code")</code> line so that it correctly selects the element with the <code>id</code> of <code>bg-hex-code</code>.
       </p>
   </details>
+  <details>
+  <summary>
+    <h5>Step 6</h5>
+  </summary>
+      <p>
+        CamperBot has now created a function called <code>changeBackgroundColor</code> that changes the background color of the page to a random color from the <code>darkColorsArr</code> array. The function also displays the hex code for that new color.
+      </p>
+      <p>
+        When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+      </p>
+      <details>
+        <summary>
+          <h5>Example Code</h5>
+        </summary>
+        <code>Hex Code: undefined</code>
+      </details>
+      <p>
+        <code>undefined</code> is showing up here because the <code>color</code> variable is not being set correctly.
+      </p>
+      <p>
+        Fix the error in the <code>darkColorsArr[getRandomIndex]</code> line so that the color variable is set to a random color from the <code>darkColorsArr</code> array.
+      </p>
+    </details>
 </details>
 
+
 ### technologies
 
 <table>

__6__step__/README.md

@@ -33,7 +33,7 @@ In this project, you will help CamperBot build a random background color changer
 
 #### preview
 
-![preview 'Random Background Color Changer step 5'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
+![preview 'Random Background Color Changer step 6'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
 
 | [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
 | ------------------------ | ------------------------ | ---------------------- |
@@ -163,15 +163,21 @@ const darkColorsArr = [
 ];
 
 function getRandomIndex() {
-  console.log(Math.floor(darkColorsArr.length * Math.random()));
+  const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+  return randomIndex;
 }
 
-getRandomIndex();
-
 const body = document.querySelector("body");
 const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
 
-console.log(bgHexCodeSpanElement);
+function changeBackgroundColor() {
+  const color = darkColorsArr[getRandomIndex()];
+
+  bgHexCodeSpanElement.innerText = color;
+  body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();
 ```
 
 [back to top](#top)

__6__step__/script.js

@@ -12,12 +12,18 @@ const darkColorsArr = [
 ];
 
 function getRandomIndex() {
-  console.log(Math.floor(darkColorsArr.length * Math.random()));
+  const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+  return randomIndex;
 }
 
-getRandomIndex();
-
 const body = document.querySelector("body");
 const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
 
-console.log(bgHexCodeSpanElement);
+function changeBackgroundColor() {
+  const color = darkColorsArr[getRandomIndex()];
+
+  bgHexCodeSpanElement.innerText = color;
+  body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();