Skip to content

Commit 668486a

Browse files
AndriiKotAndriiKot
committed
Merge commit '5cb8409178789650482cd0cdf93358c2232361fc'
2 parents e92087e + 5cb8409 commit 668486a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+3063
-12
lines changed

‎Random_Background_Color_Changer/README.md‎

Lines changed: 189 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,179 @@ Debugging is the process of going through your code, finding any issues, and fix
66

77
In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
88

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+
<summary>
119+
<h5>Step 6</h5>
120+
</summary>
121+
<p>
122+
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.
123+
</p>
124+
<p>
125+
When they try to test out this function, they notice that the background color is not changing and the text shows the following:
126+
</p>
127+
<details>
128+
<summary>
129+
<h5>Example Code</h5>
130+
</summary>
131+
<code>Hex Code: undefined</code>
132+
</details>
133+
<p>
134+
<code>undefined</code> is showing up here because the <code>color</code> variable is not being set correctly.
135+
</p>
136+
<p>
137+
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.
138+
</p>
139+
</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>
157+
<details>
158+
<summary>
159+
<h5>Step 8</h5>
160+
</summary>
161+
<p>
162+
CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
163+
</p>
164+
<p>
165+
It looks like they are trying to use the <code>onclick</code> property but they are using it incorrectly. The <code>onclick</code> property should be assigned a function reference.
166+
</p>
167+
<p>
168+
Fix the error in the <code>btn.onclick = changeBackgroundColor;</code> line.
169+
</p>
170+
<p>
171+
Remember that you worked with the <code>onclick</code> property in the Role playing game project. Look back at the final solution to see how <code>onclick</code> was properly used.
172+
</p>
173+
<p>
174+
Once you fix that final bug, the random background color changer will be complete!
175+
</p>
176+
</details>
177+
</details>
178+
9179
#### preview
10180

11-
![preview 'Random Background Color Changer step 1'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
181+
![preview 'Random Background Color Changer'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/end-project.png)
12182

13183
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
14184
| ------------------------ | ------------------------ | ---------------------- |
@@ -136,6 +306,24 @@ const darkColorsArr = [
136306
"#2C3E50",
137307
"#800020",
138308
];
309+
310+
function getRandomIndex() {
311+
const randomIndex = Math.floor(darkColorsArr.length * Math.random());
312+
return randomIndex;
313+
}
314+
315+
const body = document.querySelector("body");
316+
const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
317+
318+
function changeBackgroundColor() {
319+
const color = darkColorsArr[getRandomIndex()];
320+
321+
bgHexCodeSpanElement.innerText = color;
322+
body.style.backgroundColor = color;
323+
}
324+
const btn = document.querySelector("#btn");
325+
326+
btn.onclick = changeBackgroundColor;
139327
```
140328

141329
[back to top](#top)

‎Random_Background_Color_Changer/end-product/.gitkeep‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Random_Background_Color_Changer/end-product/README.md‎

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

0 commit comments

Comments
 (0)