Skip to content

Commit d062bf0

Browse files
AndriiKotAndriiKot
committed
'Random Background Color Changer' fix: btn step-7 (variation_2)
1 parent de0b50a commit d062bf0

8 files changed

Lines changed: 470 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,28 @@ In this project, you will help CamperBot build a random background color changer
137137
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.
138138
</p>
139139
</details>
140+
<details>
141+
<summary>
142+
<h5>Step 7</h5>
143+
</summary>
144+
<p>
145+
CamperBot is trying to create a new variable called <code>btn</code> to store the reference to the button element with the <code>id</code> of <code>click-btn</code>
146+
</p>
147+
<p>
148+
However, when they try to log the button element to the console, they see that the button element is <code>null</code>.
149+
</p>
150+
<p>
151+
Open up the <code>index.html</code> to see the correct <code>id</code> name for that button element.
152+
</p>
153+
<p>
154+
Then fix the error for the <code>document.querySelector("#click-btn");</code> line.
155+
</p>
156+
</details>
140157
</details>
141158

142159
#### preview
143160

144-
![preview 'Random Background Color Changer step 6'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
161+
![preview 'Random Background Color Changer step 7'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
145162

146163
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
147164
| ------------------------ | ------------------------ | ---------------------- |
@@ -285,7 +302,8 @@ function changeBackgroundColor() {
285302
body.style.backgroundColor = color;
286303
}
287304

288-
changeBackgroundColor();
305+
const btn = document.querySelector("#btn");
306+
console.log(btn);
289307
```
290308

291309
[back to top](#top)

‎__0__title__/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,23 @@ In this project, you will help CamperBot build a random background color changer
137137
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.
138138
</p>
139139
</details>
140+
<details>
141+
<summary>
142+
<h5>Step 7</h5>
143+
</summary>
144+
<p>
145+
CamperBot is trying to create a new variable called <code>btn</code> to store the reference to the button element with the <code>id</code> of <code>click-btn</code>
146+
</p>
147+
<p>
148+
However, when they try to log the button element to the console, they see that the button element is <code>null</code>.
149+
</p>
150+
<p>
151+
Open up the <code>index.html</code> to see the correct <code>id</code> name for that button element.
152+
</p>
153+
<p>
154+
Then fix the error for the <code>document.querySelector("#click-btn");</code> line.
155+
</p>
156+
</details>
140157
</details>
141158

142159

‎__0__title__/title.txt‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,148 @@ help CamperBot build a random
77
background color changer
88
and help them find and fix errors.
99

10+
Step 1
11+
CamperBot is trying to build out
12+
a random background color changer.
13+
But they keep running into
14+
issues and need your help to debug the code.
15+
16+
CamperBot has already added
17+
the HTML and CSS for the project.
18+
But they are confused as to why
19+
none of the styles and content is showing up on the page.
20+
21+
When they open up the console they see this message:
22+
23+
Example Code
24+
SyntaxError: unknown: Unexpected token, expected "," (5:2)
25+
Syntax errors are thrown when
26+
the JavaScript engine encounters something
27+
it can't interpret. In this case,
28+
it looks like CamperBot has syntax
29+
errors in the darkColorsArr array.
30+
31+
Fix the syntax errors in
32+
the darkColorsArr array and you
33+
should see the content and styles show up on the page.
34+
35+
36+
Step 2
37+
Now, CamperBot is trying to create
38+
a function that will return a random
39+
index from the darkColorsArr.
40+
But they have run into the following error message:
41+
42+
Example Code
43+
Uncaught ReferenceError: math is not defined
44+
A ReferenceError is thrown when
45+
a non-existent variable is referenced.
46+
In this case, it looks like CamperBot
47+
is trying to use math but JavaScript doesn't have a math object.
48+
49+
Fix CamperBot's error in the math.random()
50+
line and open up the console again.
51+
52+
53+
Step 3
54+
Now that the ReferenceError
55+
is resolved, the console is
56+
displaying the correct results
57+
for a random number between 0 and 9.
58+
But CamperBot was not expecting to see decimal numbers like these:
59+
60+
Example Code
61+
0.015882899879771095
62+
2.114596286197641
63+
6.040964780197666
64+
Update the console statement to print a whole number between 0 and 9.
65+
66+
Remember that you worked with a method
67+
in the Role Playing Game that
68+
rounds a number down to the nearest whole number.
69+
70+
71+
Step 4
72+
CamperBot is finished with
73+
building out the getRandomIndex
74+
function and it is working as expected.
75+
76+
But now they are running into
77+
this issue when trying to create
78+
a reference to the body element in the DOM:
79+
80+
Example Code
81+
82+
Uncaught TypeError: document.queryselector
83+
is not a function
84+
A TypeError means that the
85+
code is trying to perform
86+
an operation on a value that
87+
is not of the expected type.
88+
89+
Fix the TypeError by updating
90+
the document.queryselector method
91+
to the correct method name
92+
that selects an element from the DOM.
93+
94+
95+
Step 5
96+
CamperBot has created a new variable
97+
called bgHexCodeSpanElement to
98+
store the reference to the span
99+
element with the id of bg-hex-code.
100+
However, when they try to
101+
log that variable to the console,
102+
they get null.
103+
104+
null is a special value in JavaScript
105+
that represents the absence of a value.
106+
This can happen when you try
107+
to access a property of an object that doesn't exist.
108+
109+
In this case, CamperBot is not
110+
passing in the correct
111+
selector to the document.querySelector method.
112+
113+
Fix the document.querySelector("bg-hex-code")
114+
line so that it correctly selects
115+
the element with the id of bg-hex-code.
116+
117+
118+
Step 6
119+
CamperBot has now created a function
120+
called changeBackgroundColor that changes
121+
the background color of the page to a random color
122+
from the darkColorsArr array.
123+
The function also displays the hex code for that new color.
124+
125+
When they try to test out this function,
126+
they notice that the background
127+
color is not changing and the text shows the following:
128+
129+
Example Code
130+
Hex Code: undefined
131+
undefined is showing up here because
132+
the color variable is not being set correctly.
133+
134+
Fix the error in the darkColorsArr[getRandomIndex]
135+
line so that the color variable is set to a random color
136+
from the darkColorsArr array.
137+
138+
139+
Step 7
140+
CamperBot is trying to create
141+
a new variable called btn to store
142+
the reference to the button
143+
element with the id of click-btn
144+
145+
However, when they try to log
146+
the button element to the console,
147+
they see that the button element is null.
148+
149+
Open up the index.html to see
150+
the correct id name for that button element.
151+
152+
Then fix the error for
153+
the document.querySelector("#click-btn"); line.
154+

‎__7__step__/README.md‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<a id=top></a>
2+
3+
<details>
4+
<summary>
5+
<h4>Description of the task</h4>
6+
</summary>
7+
<h3>Step 7</h3>
8+
<p>
9+
CamperBot is trying to create a new variable called <code>btn</code> to store the reference to the button element with the <code>id</code> of <code>click-btn</code>
10+
</p>
11+
<p>
12+
However, when they try to log the button element to the console, they see that the button element is <code>null</code>.
13+
</p>
14+
<p>
15+
Open up the <code>index.html</code> to see the correct <code>id</code> name for that button element.
16+
</p>
17+
<p>
18+
Then fix the error for the <code>document.querySelector("#click-btn");</code> line.
19+
</p>
20+
</details>
21+
22+
# Random Background Color changer
23+
24+
Debugging is the process of going through your code, finding any issues, and fixing them.
25+
26+
In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
27+
28+
#### preview
29+
30+
![preview 'Random Background Color Changer step 7'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
31+
32+
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
33+
| ------------------------ | ------------------------ | ---------------------- |
34+
35+
### technologies
36+
37+
<table>
38+
<thead>
39+
<tr>
40+
<th height=33 width=91>JavaScript</th>
41+
<th height=33 width=91>CSS</th>
42+
<th height=33 width=91>HTML</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
<tr>
47+
<td height=33 width=91>
48+
<a href=https://ecma-international.org/publications-and-standards/standards/>
49+
<img src=https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp/blob/main/preview/icons/javascript-1.svg alt=JavaScript>
50+
</a>
51+
</td>
52+
<td height=33 width=91>
53+
<a href=https://www.w3.org/Style/CSS/>
54+
<img src=https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp/blob/main/preview/icons/css.svg alt=CSS>
55+
</a>
56+
</td>
57+
<td height=33 width=91>
58+
<a href=https://html.spec.whatwg.org/multipage/>
59+
<img src=https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp/blob/main/preview/icons/html.svg alt=HTML>
60+
</a>
61+
</td>
62+
</tr>
63+
</tbody>
64+
</table>
65+
66+
[back to top](#top)
67+
68+
### index.html
69+
70+
```html
71+
<!DOCTYPE html>
72+
<html lang="en">
73+
<head>
74+
<meta charset="UTF-8" />
75+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76+
<title>Build a random background color changer</title>
77+
<link rel="stylesheet" href="./styles.css" />
78+
</head>
79+
<body>
80+
<h1>Random Background Color changer</h1>
81+
82+
<main>
83+
<section class="bg-information-container">
84+
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
85+
</section>
86+
87+
<button class="btn" id="btn">Change Background Color</button>
88+
</main>
89+
<script src="./script.js"></script>
90+
</body>
91+
</html>
92+
```
93+
94+
[back to top](#top)
95+
96+
### styles.css
97+
98+
```css
99+
*,
100+
*::before,
101+
*::after {
102+
margin: 0;
103+
padding: 0;
104+
box-sizing: border-box;
105+
}
106+
107+
:root {
108+
--yellow: #f1be32;
109+
--golden-yellow: #feac32;
110+
--dark-purple: #110815;
111+
--light-grey: #efefef;
112+
}
113+
114+
body {
115+
background-color: var(--dark-purple);
116+
color: var(--light-grey);
117+
text-align: center;
118+
}
119+
120+
.bg-information-container {
121+
margin: 15px 0 25px;
122+
font-size: 1.2rem;
123+
}
124+
125+
.btn {
126+
cursor: pointer;
127+
padding: 10px;
128+
margin: 10px;
129+
color: var(--dark-purple);
130+
background-color: var(--golden-yellow);
131+
background-image: linear-gradient(#fecc4c, #ffac33);
132+
border-color: var(--golden-yellow);
133+
border-width: 3px;
134+
}
135+
136+
.btn:hover {
137+
background-image: linear-gradient(#ffcc4c, #f89808);
138+
}
139+
```
140+
141+
[back to top](#top)
142+
143+
### script.js
144+
145+
```js
146+
const darkColorsArr = [
147+
"#2C3E50",
148+
"#34495E",
149+
"#2C2C2C",
150+
"#616A6B",
151+
"#4A235A",
152+
"#2F4F4F",
153+
"#0E4B5A",
154+
"#36454F",
155+
"#2C3E50",
156+
"#800020",
157+
];
158+
159+
function getRandomIndex() {
160+
const randomIndex = Math.floor(darkColorsArr.length * Math.random());
161+
return randomIndex;
162+
}
163+
164+
const body = document.querySelector("body");
165+
const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
166+
167+
function changeBackgroundColor() {
168+
const color = darkColorsArr[getRandomIndex()];
169+
170+
bgHexCodeSpanElement.innerText = color;
171+
body.style.backgroundColor = color;
172+
}
173+
174+
const btn = document.querySelector("#btn");
175+
console.log(btn);
176+
```
177+
178+
[back to top](#top)

0 commit comments

Comments
 (0)