Skip to content

Commit 40e62c8

Browse files
AndriiKotAndriiKot
committed
'Random Background Color Changer' docs: add README.md to 'title' (variation_2)
1 parent a56645e commit 40e62c8

1 file changed

Lines changed: 150 additions & 0 deletions

File tree

‎__0__title__/README.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<a id=top></a>
2+
3+
# Random Background Color changer
4+
5+
Debugging is the process of going through your code, finding any issues, and fixing them.
6+
7+
In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
8+
9+
<details>
10+
<summary>
11+
<h4>Description of the Tasks</h4>
12+
</summary>
13+
<details>
14+
<summary>
15+
<h5>Step 1</h5>
16+
</summary>
17+
<p>
18+
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
19+
</p>
20+
<p>
21+
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.
22+
</p>
23+
<p>
24+
When they open up the console they see this message:
25+
</p>
26+
<details>
27+
<summary>
28+
<h5>Example Code</h5>
29+
</summary>
30+
<code>SyntaxError: unknown: Unexpected token, expected "," (5:2)</code>
31+
</details>
32+
<p>
33+
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 <code>darkColorsArr</code> array.
34+
</p>
35+
<p>
36+
Fix the syntax errors in the <code>darkColorsArr</code> array and you should see the content and styles show up on the page.
37+
</p>
38+
</details>
39+
<details>
40+
<summary>
41+
<h5>Step 2</h5>
42+
</summary>
43+
<p>
44+
Now, CamperBot is trying to create a function that will return a random index from the <code>darkColorsArr</code>. But they have run into the following error message:
45+
</p>
46+
<details>
47+
<summary>
48+
<h5>Example Code</h5>
49+
</summary>
50+
<code>Uncaught ReferenceError: math is not defined</code>
51+
</details>
52+
<p>
53+
A <code>ReferenceError</code> is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use <code>math</code> but JavaScript doesn't have a <code>math</code> object.
54+
</p>
55+
<p>
56+
Fix CamperBot's error in the <code>math.random()</code> line and open up the console again.
57+
</p>
58+
</details>
59+
<details>
60+
<summary>
61+
<h5>Step 3</h5>
62+
</summary>
63+
<p>
64+
Now that the <code>ReferenceError</code> is resolved, the console is displaying the correct results for a random number between <code>0</code> and <code>9</code>. But CamperBot was not expecting to see decimal numbers like these:
65+
</p>
66+
<details>
67+
<summary>
68+
<h5>Example Code</h5>
69+
</summary>
70+
<code>0.015882899879771095</code><br>
71+
<code>2.114596286197641</code><br>
72+
<code>6.040964780197666</code><br>
73+
</details>
74+
<p>
75+
Update the <code>console</code> statement to print a whole number between <code>0</code> and <code>9</code>.
76+
</p>
77+
<p>
78+
Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
79+
</p>
80+
</details>
81+
<details>
82+
<summary>
83+
<h5>Step 4</h5>
84+
</summary>
85+
<p>
86+
CamperBot is finished with building out the
87+
getRandomIndex function and it is working as expected. But now they are running into this issue
88+
when trying to create a reference to the <code>body</code> element in the DOM:
89+
</p>
90+
<p>
91+
<code>Uncaught TypeError: document.queryselector is not a function</code>
92+
</p>
93+
<p>
94+
A TypeError means that the code is trying to perform
95+
an operation on a value that is not of the expected type.
96+
</p>
97+
<p>
98+
Fix the TypeError by updating the document.queryselector
99+
method to the correct method name that selects an element from the DOM.
100+
</p>
101+
</details>
102+
<details>
103+
<summary>
104+
<h5>Step 5</h5>
105+
</summary>
106+
<p>
107+
CamperBot has created a new variable called <code>bgHexCodeSpanElement</code> to store the reference to the <code>span</code> element with the <code>id</code> of <code>bg-hex-code</code>. However, when they try to log that variable to the console, they get <code>null</code>.
108+
</p>
109+
<p>
110+
<code>null</code> 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
111+
In this case, CamperBot is not passing in the correct selector to the <code>document.querySelector</code> method
112+
</p>
113+
<p>
114+
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>.
115+
</p>
116+
</details>
117+
</details>
118+
119+
### technologies
120+
121+
<table>
122+
<thead>
123+
<tr>
124+
<th height=33 width=91>JavaScript</th>
125+
<th height=33 width=91>CSS</th>
126+
<th height=33 width=91>HTML</th>
127+
</tr>
128+
</thead>
129+
<tbody>
130+
<tr>
131+
<td height=33 width=91>
132+
<a href=https://ecma-international.org/publications-and-standards/standards/>
133+
<img src=https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp/blob/main/preview/icons/javascript-1.svg alt=JavaScript>
134+
</a>
135+
</td>
136+
<td height=33 width=91>
137+
<a href=https://www.w3.org/Style/CSS/>
138+
<img src=https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp/blob/main/preview/icons/css.svg alt=CSS>
139+
</a>
140+
</td>
141+
<td height=33 width=91>
142+
<a href=https://html.spec.whatwg.org/multipage/>
143+
<img src=https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp/blob/main/preview/icons/html.svg alt=HTML>
144+
</a>
145+
</td>
146+
</tr>
147+
</tbody>
148+
</table>
149+
150+
[back to top](#top)

0 commit comments

Comments
 (0)