+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
+
+
Step 2
+
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+
Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+
+
Step 3
+
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+
+
Step 4
+
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+
+
Step 5
+
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+
#### preview

@@ -144,6 +254,9 @@ function getRandomIndex() {
getRandomIndex();
const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+console.log(bgHexCodeSpanElement);
```
[back to top](#top)
diff --git a/steps/README.md b/steps/README.md
index 8f2f340..b16e956 100644
--- a/steps/README.md
+++ b/steps/README.md
@@ -6,6 +6,116 @@ Debugging is the process of going through your code, finding any issues, and fix
In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+
+
Description of the Tasks
+
+
+
+
Step 1
+
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
+
+
Step 2
+
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+
Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+
+
Step 3
+
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+
+
Step 4
+
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+
+
Step 5
+
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+
#### preview

@@ -144,6 +254,9 @@ function getRandomIndex() {
getRandomIndex();
const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+console.log(bgHexCodeSpanElement);
```
[back to top](#top)
diff --git a/steps/__0__title__/README.md b/steps/__0__title__/README.md
new file mode 100644
index 0000000..cc24694
--- /dev/null
+++ b/steps/__0__title__/README.md
@@ -0,0 +1,150 @@
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+
+
+
Description of the Tasks
+
+
+
+
Step 1
+
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
+
+
Step 2
+
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+
Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+
+
Step 3
+
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+
+
Step 4
+
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+
+
Step 5
+
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
# Random Background Color changer
Debugging is the process of going through your code, finding any issues, and fixing them.
diff --git a/steps/__1__step__/title.txt b/steps/__1__step__/title.txt
new file mode 100644
index 0000000..4d4b89c
--- /dev/null
+++ b/steps/__1__step__/title.txt
@@ -0,0 +1,26 @@
+Step 1
+CamperBot is trying to build out
+a random background color changer.
+But they keep running into
+issues and need your help to debug the code.
+
+CamperBot has already added
+the HTML and CSS for the project.
+But they are confused as to why
+none of the styles and content is showing up on the page.
+
+When they open up the console they see this message:
+
+Example Code
+SyntaxError: unknown: Unexpected token, expected "," (5:2)
+Syntax errors are thrown when
+the JavaScript engine encounters something
+it can't interpret. In this case,
+it looks like CamperBot has syntax
+errors in the darkColorsArr array.
+
+Fix the syntax errors in
+the darkColorsArr array and you
+should see the content and styles show up on the page.
+
+
diff --git a/steps/__2__step__/README.md b/steps/__2__step__/README.md
index 7a84c51..6f9bb71 100644
--- a/steps/__2__step__/README.md
+++ b/steps/__2__step__/README.md
@@ -1,5 +1,27 @@
+
+
+
Description of the task
+
+
Step 2
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+
Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
# Random Background Color changer
Debugging is the process of going through your code, finding any issues, and fixing them.
diff --git a/steps/__2__step__/title.txt b/steps/__2__step__/title.txt
new file mode 100644
index 0000000..c6d9178
--- /dev/null
+++ b/steps/__2__step__/title.txt
@@ -0,0 +1,17 @@
+Step 2
+Now, CamperBot is trying to create
+a function that will return a random
+index from the darkColorsArr.
+But they have run into the following error message:
+
+Example Code
+Uncaught ReferenceError: math is not defined
+A ReferenceError is thrown when
+a non-existent variable is referenced.
+In this case, it looks like CamperBot
+is trying to use math but JavaScript doesn't have a math object.
+
+Fix CamperBot's error in the math.random()
+line and open up the console again.
+
+
diff --git a/steps/__3__step__/README.md b/steps/__3__step__/README.md
index 6dd1385..0c41d4e 100644
--- a/steps/__3__step__/README.md
+++ b/steps/__3__step__/README.md
@@ -1,5 +1,29 @@
+
+
+
Description of the task
+
+
Step 3
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
# Random Background Color changer
Debugging is the process of going through your code, finding any issues, and fixing them.
diff --git a/steps/__3__step__/title.txt b/steps/__3__step__/title.txt
new file mode 100644
index 0000000..73348c8
--- /dev/null
+++ b/steps/__3__step__/title.txt
@@ -0,0 +1,20 @@
+Step 3
+Now that the ReferenceError
+is resolved, the console is
+displaying the correct results
+for a random number between 0 and 9.
+But CamperBot was not expecting to see decimal numbers like these:
+
+Example Code
+0.015882899879771095
+2.114596286197641
+6.040964780197666
+Update the console statement to print a whole number between 0 and 9.
+
+Remember that you worked with a method
+in the Role Playing Game that
+rounds a number down to the nearest whole number.
+
+
+
+
diff --git a/steps/__4__step__/README.md b/steps/__4__step__/README.md
index 8f2f340..82d83df 100644
--- a/steps/__4__step__/README.md
+++ b/steps/__4__step__/README.md
@@ -1,5 +1,28 @@
+
+
+
Description of the task
+
+
Step 4
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
# Random Background Color changer
Debugging is the process of going through your code, finding any issues, and fixing them.
diff --git a/steps/__4__step__/title.txt b/steps/__4__step__/title.txt
new file mode 100644
index 0000000..138f140
--- /dev/null
+++ b/steps/__4__step__/title.txt
@@ -0,0 +1,23 @@
+Step 4
+CamperBot is finished with
+building out the getRandomIndex
+function and it is working as expected.
+
+But now they are running into
+this issue when trying to create
+a reference to the body element in the DOM:
+
+Example Code
+
+Uncaught TypeError: document.queryselector
+is not a function
+A TypeError means that the
+code is trying to perform
+an operation on a value that
+is not of the expected type.
+
+Fix the TypeError by updating
+the document.queryselector method
+to the correct method name
+that selects an element from the DOM.
+
diff --git a/steps/__5__step__/README.md b/steps/__5__step__/README.md
new file mode 100644
index 0000000..6befda3
--- /dev/null
+++ b/steps/__5__step__/README.md
@@ -0,0 +1,169 @@
+
+
+
+
+
Description of the task
+
+
Step 5
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+
+
+
+
+
+
diff --git a/steps/__5__step__/script.js b/steps/__5__step__/script.js
new file mode 100644
index 0000000..e9b88f5
--- /dev/null
+++ b/steps/__5__step__/script.js
@@ -0,0 +1,23 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+console.log(bgHexCodeSpanElement);
diff --git a/steps/__5__step__/styles.css b/steps/__5__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/steps/__5__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/steps/__5__step__/title.txt b/steps/__5__step__/title.txt
new file mode 100644
index 0000000..ee05d62
--- /dev/null
+++ b/steps/__5__step__/title.txt
@@ -0,0 +1,22 @@
+Step 5
+CamperBot has created a new variable
+called bgHexCodeSpanElement to
+store the reference to the span
+element with the id of bg-hex-code.
+However, when they try to
+log that variable to the console,
+they get null.
+
+null is a special value in JavaScript
+that represents the absence of a value.
+This can happen when you try
+to access a property of an object that doesn't exist.
+
+In this case, CamperBot is not
+passing in the correct
+selector to the document.querySelector method.
+
+Fix the document.querySelector("bg-hex-code")
+line so that it correctly selects
+the element with the id of bg-hex-code.
+
From e68a61f41df0a76a627b81497eb600511f60cf07 Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 17:19:25 +0100
Subject: [PATCH 011/444] 'Random Background Color Changer' fix:
darkColorsArr[] (step 6)
---
README.md | 39 +++++++-
steps/README.md | 39 +++++++-
steps/__6__step__/README.md | 183 +++++++++++++++++++++++++++++++++++
steps/__6__step__/index.html | 22 +++++
steps/__6__step__/script.js | 29 ++++++
steps/__6__step__/styles.css | 41 ++++++++
steps/__6__step__/title.txt | 20 ++++
7 files changed, 363 insertions(+), 10 deletions(-)
create mode 100644 steps/__6__step__/README.md
create mode 100644 steps/__6__step__/index.html
create mode 100644 steps/__6__step__/script.js
create mode 100644 steps/__6__step__/styles.css
create mode 100644 steps/__6__step__/title.txt
diff --git a/README.md b/README.md
index b16e956..c73cd63 100644
--- a/README.md
+++ b/README.md
@@ -114,11 +114,34 @@ In this project, you will help CamperBot build a random background color changer
Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
Step 6
+
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+
Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
#### preview
-
+
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
| ------------------------ | ------------------------ | ---------------------- |
@@ -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)
diff --git a/steps/README.md b/steps/README.md
index b16e956..c73cd63 100644
--- a/steps/README.md
+++ b/steps/README.md
@@ -114,11 +114,34 @@ In this project, you will help CamperBot build a random background color changer
Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
Step 6
+
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+
Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+
Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+
+
+
+
+
+
diff --git a/steps/__6__step__/script.js b/steps/__6__step__/script.js
new file mode 100644
index 0000000..8af139a
--- /dev/null
+++ b/steps/__6__step__/script.js
@@ -0,0 +1,29 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();
diff --git a/steps/__6__step__/styles.css b/steps/__6__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/steps/__6__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/steps/__6__step__/title.txt b/steps/__6__step__/title.txt
new file mode 100644
index 0000000..4672778
--- /dev/null
+++ b/steps/__6__step__/title.txt
@@ -0,0 +1,20 @@
+Step 6Passed
+CamperBot has now created a function
+called changeBackgroundColor that changes
+the background color of the page to a random color
+from the darkColorsArr array.
+The function also displays the hex code for that new color.
+
+When they try to test out this function,
+they notice that the background
+color is not changing and the text shows the following:
+
+Example Code
+Hex Code: undefined
+undefined is showing up here because
+the color variable is not being set correctly.
+
+Fix the error in the darkColorsArr[getRandomIndex]
+line so that the color variable is set to a random color
+from the darkColorsArr array.
+
From 56f992577be58c1f9710d3c01313117a9d1cb0ea Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 17:21:23 +0100
Subject: [PATCH 012/444] 'Random Background Color Changer' docs: README.md
update (step 6)
---
steps/__0__title__/README.md | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
diff --git a/steps/__0__title__/README.md b/steps/__0__title__/README.md
index cc24694..777603f 100644
--- a/steps/__0__title__/README.md
+++ b/steps/__0__title__/README.md
@@ -114,8 +114,32 @@ In this project, you will help CamperBot build a random background color changer
Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
Step 6
+
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+
Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
### technologies
From 30c34646a478fd912e0c4adc60834758a9045e0e Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 17:27:33 +0100
Subject: [PATCH 013/444] 'Random Background Color Changer' docs: folder
_0_title update
---
steps/__0__title__/title.txt | 129 +++++++++++++++++++++++++++++++++++
steps/__6__step__/title.txt | 2 +-
2 files changed, 130 insertions(+), 1 deletion(-)
diff --git a/steps/__0__title__/title.txt b/steps/__0__title__/title.txt
index 3b7e991..41ee76d 100644
--- a/steps/__0__title__/title.txt
+++ b/steps/__0__title__/title.txt
@@ -7,3 +7,132 @@ help CamperBot build a random
background color changer
and help them find and fix errors.
+Step 1
+CamperBot is trying to build out
+a random background color changer.
+But they keep running into
+issues and need your help to debug the code.
+
+CamperBot has already added
+the HTML and CSS for the project.
+But they are confused as to why
+none of the styles and content is showing up on the page.
+
+When they open up the console they see this message:
+
+Example Code
+SyntaxError: unknown: Unexpected token, expected "," (5:2)
+Syntax errors are thrown when
+the JavaScript engine encounters something
+it can't interpret. In this case,
+it looks like CamperBot has syntax
+errors in the darkColorsArr array.
+
+Fix the syntax errors in
+the darkColorsArr array and you
+should see the content and styles show up on the page.
+
+
+Step 2
+Now, CamperBot is trying to create
+a function that will return a random
+index from the darkColorsArr.
+But they have run into the following error message:
+
+Example Code
+Uncaught ReferenceError: math is not defined
+A ReferenceError is thrown when
+a non-existent variable is referenced.
+In this case, it looks like CamperBot
+is trying to use math but JavaScript doesn't have a math object.
+
+Fix CamperBot's error in the math.random()
+line and open up the console again.
+
+
+Step 3
+Now that the ReferenceError
+is resolved, the console is
+displaying the correct results
+for a random number between 0 and 9.
+But CamperBot was not expecting to see decimal numbers like these:
+
+Example Code
+0.015882899879771095
+2.114596286197641
+6.040964780197666
+Update the console statement to print a whole number between 0 and 9.
+
+Remember that you worked with a method
+in the Role Playing Game that
+rounds a number down to the nearest whole number.
+
+
+Step 4
+CamperBot is finished with
+building out the getRandomIndex
+function and it is working as expected.
+
+But now they are running into
+this issue when trying to create
+a reference to the body element in the DOM:
+
+Example Code
+
+Uncaught TypeError: document.queryselector
+is not a function
+A TypeError means that the
+code is trying to perform
+an operation on a value that
+is not of the expected type.
+
+Fix the TypeError by updating
+the document.queryselector method
+to the correct method name
+that selects an element from the DOM.
+
+
+Step 5
+CamperBot has created a new variable
+called bgHexCodeSpanElement to
+store the reference to the span
+element with the id of bg-hex-code.
+However, when they try to
+log that variable to the console,
+they get null.
+
+null is a special value in JavaScript
+that represents the absence of a value.
+This can happen when you try
+to access a property of an object that doesn't exist.
+
+In this case, CamperBot is not
+passing in the correct
+selector to the document.querySelector method.
+
+Fix the document.querySelector("bg-hex-code")
+line so that it correctly selects
+the element with the id of bg-hex-code.
+
+
+Step 6
+CamperBot has now created a function
+called changeBackgroundColor that changes
+the background color of the page to a random color
+from the darkColorsArr array.
+The function also displays the hex code for that new color.
+
+When they try to test out this function,
+they notice that the background
+color is not changing and the text shows the following:
+
+Example Code
+Hex Code: undefined
+undefined is showing up here because
+the color variable is not being set correctly.
+
+Fix the error in the darkColorsArr[getRandomIndex]
+line so that the color variable is set to a random color
+from the darkColorsArr array.
+
+
diff --git a/steps/__6__step__/title.txt b/steps/__6__step__/title.txt
index 4672778..3927e84 100644
--- a/steps/__6__step__/title.txt
+++ b/steps/__6__step__/title.txt
@@ -1,4 +1,4 @@
-Step 6Passed
+Step 6
CamperBot has now created a function
called changeBackgroundColor that changes
the background color of the page to a random color
From 4f2a0d6df64f326da7144711278fe9f2e4a694cc Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 18:07:37 +0100
Subject: [PATCH 014/444] 'Random Background Color Changer' docs: all README.md
add description of the task-7
---
README.md | 19 +++-
steps/README.md | 19 +++-
steps/__7__step__/README.md | 177 +++++++++++++++++++++++++++++++++++
steps/__7__step__/index.html | 22 +++++
steps/__7__step__/script.js | 29 ++++++
steps/__7__step__/styles.css | 41 ++++++++
steps/__7__step__/title.txt | 17 ++++
7 files changed, 322 insertions(+), 2 deletions(-)
create mode 100644 steps/__7__step__/README.md
create mode 100644 steps/__7__step__/index.html
create mode 100644 steps/__7__step__/script.js
create mode 100644 steps/__7__step__/styles.css
create mode 100644 steps/__7__step__/title.txt
diff --git a/README.md b/README.md
index c73cd63..6703f47 100644
--- a/README.md
+++ b/README.md
@@ -137,11 +137,28 @@ In this project, you will help CamperBot build a random background color changer
Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
Step 7
+
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
#### preview
-
+
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
| ------------------------ | ------------------------ | ---------------------- |
diff --git a/steps/README.md b/steps/README.md
index c73cd63..6703f47 100644
--- a/steps/README.md
+++ b/steps/README.md
@@ -137,11 +137,28 @@ In this project, you will help CamperBot build a random background color changer
Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
Step 7
+
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+
+
+
+
+
+
diff --git a/steps/__7__step__/script.js b/steps/__7__step__/script.js
new file mode 100644
index 0000000..8af139a
--- /dev/null
+++ b/steps/__7__step__/script.js
@@ -0,0 +1,29 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();
diff --git a/steps/__7__step__/styles.css b/steps/__7__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/steps/__7__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/steps/__7__step__/title.txt b/steps/__7__step__/title.txt
new file mode 100644
index 0000000..55a4610
--- /dev/null
+++ b/steps/__7__step__/title.txt
@@ -0,0 +1,17 @@
+Step 7
+CamperBot is trying to create
+a new variable called btn to store
+the reference to the button
+element with the id of click-btn
+
+However, when they try to log
+the button element to the console,
+they see that the button element is null.
+
+Open up the index.html to see
+the correct id name for that button element.
+
+Then fix the error for
+the document.querySelector("#click-btn"); line.
+
+
From ccb6a63ed09263f221e298e74813725a108cdc8c Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 18:09:31 +0100
Subject: [PATCH 015/444] 'Random Background Color Changer' docs: add title
task-7
---
steps/__0__title__/title.txt | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/steps/__0__title__/title.txt b/steps/__0__title__/title.txt
index 41ee76d..c985803 100644
--- a/steps/__0__title__/title.txt
+++ b/steps/__0__title__/title.txt
@@ -136,3 +136,19 @@ line so that the color variable is set to a random color
from the darkColorsArr array.
+Step 7
+CamperBot is trying to create
+a new variable called btn to store
+the reference to the button
+element with the id of click-btn
+
+However, when they try to log
+the button element to the console,
+they see that the button element is null.
+
+Open up the index.html to see
+the correct id name for that button element.
+
+Then fix the error for
+the document.querySelector("#click-btn"); line.
+
From b4bf1b03b697904c718feb26a3ebc0bef2f12ae4 Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 18:11:35 +0100
Subject: [PATCH 016/444] 'Random Background Color Changer' docs: update folder
'_0_title' (step-7)
---
steps/__0__title__/README.md | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
diff --git a/steps/__0__title__/README.md b/steps/__0__title__/README.md
index 777603f..8785463 100644
--- a/steps/__0__title__/README.md
+++ b/steps/__0__title__/README.md
@@ -137,6 +137,23 @@ In this project, you will help CamperBot build a random background color changer
Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
Step 7
+
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
From 380e2e8e3bb7ed73a625c97e5ab10f40d904bbcd Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 18:27:06 +0100
Subject: [PATCH 017/444] 'Random Background Color Changer' fix: btn (step 7)
---
README.md | 3 ++-
steps/README.md | 3 ++-
steps/__7__step__/README.md | 3 ++-
steps/__7__step__/script.js | 3 ++-
4 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/README.md b/README.md
index 6703f47..69dd0a1 100644
--- a/README.md
+++ b/README.md
@@ -302,7 +302,8 @@ function changeBackgroundColor() {
body.style.backgroundColor = color;
}
-changeBackgroundColor();
+const btn = document.querySelector("#btn");
+console.log(btn);
```
[back to top](#top)
diff --git a/steps/README.md b/steps/README.md
index 6703f47..69dd0a1 100644
--- a/steps/README.md
+++ b/steps/README.md
@@ -302,7 +302,8 @@ function changeBackgroundColor() {
body.style.backgroundColor = color;
}
-changeBackgroundColor();
+const btn = document.querySelector("#btn");
+console.log(btn);
```
[back to top](#top)
diff --git a/steps/__7__step__/README.md b/steps/__7__step__/README.md
index ed42ae6..e9b9a79 100644
--- a/steps/__7__step__/README.md
+++ b/steps/__7__step__/README.md
@@ -171,7 +171,8 @@ function changeBackgroundColor() {
body.style.backgroundColor = color;
}
-changeBackgroundColor();
+const btn = document.querySelector("#btn");
+console.log(btn);
```
[back to top](#top)
diff --git a/steps/__7__step__/script.js b/steps/__7__step__/script.js
index 8af139a..6f04d51 100644
--- a/steps/__7__step__/script.js
+++ b/steps/__7__step__/script.js
@@ -26,4 +26,5 @@ function changeBackgroundColor() {
body.style.backgroundColor = color;
}
-changeBackgroundColor();
+const btn = document.querySelector("#btn");
+console.log(btn);
From d9acc0162c0552effa6f59aaf4e377d684552eaa Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 19:52:58 +0100
Subject: [PATCH 018/444] 'Random Background Color Changer' docs: folder
_0_title update (step-8)
---
steps/__0__title__/README.md | 21 ++++-
steps/__0__title__/title.txt | 20 ++++
steps/__8__step__/README.md | 178 +++++++++++++++++++++++++++++++++++
steps/__8__step__/index.html | 22 +++++
steps/__8__step__/script.js | 30 ++++++
steps/__8__step__/styles.css | 41 ++++++++
steps/__8__step__/title.txt | 20 ++++
7 files changed, 331 insertions(+), 1 deletion(-)
create mode 100644 steps/__8__step__/README.md
create mode 100644 steps/__8__step__/index.html
create mode 100644 steps/__8__step__/script.js
create mode 100644 steps/__8__step__/styles.css
create mode 100644 steps/__8__step__/title.txt
diff --git a/steps/__0__title__/README.md b/steps/__0__title__/README.md
index 8785463..1e9e277 100644
--- a/steps/__0__title__/README.md
+++ b/steps/__0__title__/README.md
@@ -154,9 +154,28 @@ In this project, you will help CamperBot build a random background color changer
Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
Step 8
+
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
-
### technologies
diff --git a/steps/__0__title__/title.txt b/steps/__0__title__/title.txt
index c985803..4da854b 100644
--- a/steps/__0__title__/title.txt
+++ b/steps/__0__title__/title.txt
@@ -152,3 +152,23 @@ the correct id name for that button element.
Then fix the error for
the document.querySelector("#click-btn"); line.
+Step 8
+CamperBot has finished building
+out their random background color changer.
+However, when they click the button,
+the background color does not change.
+
+It looks like they are trying to use the onclick
+property but they are using it incorrectly.
+The onclick property should be assigned a function reference.
+
+Fix the error in the btn.onclick = changeBackgroundColor(); line.
+
+Remember that you worked with the onclick
+property in the Role playing game project.
+Look back at the final solution to see
+how onclick was properly used.
+
+Once you fix that final bug,
+the random background color changer will be complete!
+
diff --git a/steps/__8__step__/README.md b/steps/__8__step__/README.md
new file mode 100644
index 0000000..e9b9a79
--- /dev/null
+++ b/steps/__8__step__/README.md
@@ -0,0 +1,178 @@
+
+
+
+
+
Description of the task
+
+
Step 7
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+
+
+
+
+
+
diff --git a/steps/__8__step__/script.js b/steps/__8__step__/script.js
new file mode 100644
index 0000000..6f04d51
--- /dev/null
+++ b/steps/__8__step__/script.js
@@ -0,0 +1,30 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+const btn = document.querySelector("#btn");
+console.log(btn);
diff --git a/steps/__8__step__/styles.css b/steps/__8__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/steps/__8__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/steps/__8__step__/title.txt b/steps/__8__step__/title.txt
new file mode 100644
index 0000000..e913544
--- /dev/null
+++ b/steps/__8__step__/title.txt
@@ -0,0 +1,20 @@
+Step 8
+CamperBot has finished building
+out their random background color changer.
+However, when they click the button,
+the background color does not change.
+
+It looks like they are trying to use the onclick
+property but they are using it incorrectly.
+The onclick property should be assigned a function reference.
+
+Fix the error in the btn.onclick = changeBackgroundColor(); line.
+
+Remember that you worked with the onclick
+property in the Role playing game project.
+Look back at the final solution to see
+how onclick was properly used.
+
+Once you fix that final bug,
+the random background color changer will be complete!
+
From 6fc022af89e0c1b5bfbeeaff3a82c6825d221221 Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 19:56:49 +0100
Subject: [PATCH 019/444] 'Random Background Color Changer' docs: README.md
update main README.md (step-8)
---
steps/README.md | 22 +++++++++++++++++++++-
1 file changed, 21 insertions(+), 1 deletion(-)
diff --git a/steps/README.md b/steps/README.md
index 69dd0a1..1c3f1e0 100644
--- a/steps/README.md
+++ b/steps/README.md
@@ -154,11 +154,31 @@ In this project, you will help CamperBot build a random background color changer
Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
Step 8
+
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
- CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
-
-
- However, when they try to log the button element to the console, they see that the button element is null.
-
-
- Open up the index.html to see the correct id name for that button element.
-
-
- Then fix the error for the document.querySelector("#click-btn"); line.
-
+
Step 8
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
# Random Background Color changer
Debugging is the process of going through your code, finding any issues, and fixing them.
From 1877e37e6c34c02c3252ba171fb9c79609d0237f Mon Sep 17 00:00:00 2001
From: AndriiKot
Date: Tue, 4 Mar 2025 20:36:34 +0100
Subject: [PATCH 021/444] 'Random Background Color Changer' fix: btn.onclick
(step-8)
---
README.md | 26 +++++++++++++++++++++++---
steps/README.md | 4 ++--
steps/__8__step__/README.md | 6 +++---
steps/__8__step__/script.js | 4 ++--
4 files changed, 30 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index 69dd0a1..0607508 100644
--- a/README.md
+++ b/README.md
@@ -154,11 +154,31 @@ In this project, you will help CamperBot build a random background color changer
Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
Step 8
+
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+