Skip to content

Commit da25b2b

Browse files
AndriiKotAndriiKot
committed
'Random Background Color Changer' docs: README.md step-6 'descriptin of task' (variation_2)
1 parent 40e62c8 commit da25b2b

6 files changed

Lines changed: 284 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ In this project, you will help CamperBot build a random background color changer
118118

119119
#### preview
120120

121-
![preview 'Random Background Color Changer step 4'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
121+
![preview 'Random Background Color Changer step 6'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png)
122122

123123
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
124124
| ------------------------ | ------------------------ | ---------------------- |

‎__6__step__/README.md‎

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

‎__6__step__/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Build a random background color changer</title>
7+
<link rel="stylesheet" href="./styles.css" />
8+
</head>
9+
<body>
10+
<h1>Random Background Color changer</h1>
11+
12+
<main>
13+
<section class="bg-information-container">
14+
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
15+
</section>
16+
17+
<button class="btn" id="btn">Change Background Color</button>
18+
</main>
19+
<script src="./script.js"></script>
20+
</body>
21+
</html>
22+

‎__6__step__/script.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const darkColorsArr = [
2+
"#2C3E50",
3+
"#34495E",
4+
"#2C2C2C",
5+
"#616A6B",
6+
"#4A235A",
7+
"#2F4F4F",
8+
"#0E4B5A",
9+
"#36454F",
10+
"#2C3E50",
11+
"#800020",
12+
];
13+
14+
function getRandomIndex() {
15+
console.log(Math.floor(darkColorsArr.length * Math.random()));
16+
}
17+
18+
getRandomIndex();
19+
20+
const body = document.querySelector("body");
21+
const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
22+
23+
console.log(bgHexCodeSpanElement);

‎__6__step__/styles.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
*,
2+
*::before,
3+
*::after {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--yellow: #f1be32;
11+
--golden-yellow: #feac32;
12+
--dark-purple: #110815;
13+
--light-grey: #efefef;
14+
}
15+
16+
body {
17+
background-color: var(--dark-purple);
18+
color: var(--light-grey);
19+
text-align: center;
20+
}
21+
22+
.bg-information-container {
23+
margin: 15px 0 25px;
24+
font-size: 1.2rem;
25+
}
26+
27+
.btn {
28+
cursor: pointer;
29+
padding: 10px;
30+
margin: 10px;
31+
color: var(--dark-purple);
32+
background-color: var(--golden-yellow);
33+
background-image: linear-gradient(#fecc4c, #ffac33);
34+
border-color: var(--golden-yellow);
35+
border-width: 3px;
36+
}
37+
38+
.btn:hover {
39+
background-image: linear-gradient(#ffcc4c, #f89808);
40+
}
41+

‎__6__step__/title.txt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Step 6Passed
2+
CamperBot has now created a function
3+
called changeBackgroundColor that changes
4+
the background color of the page to a random color
5+
from the darkColorsArr array.
6+
The function also displays the hex code for that new color.
7+
8+
When they try to test out this function,
9+
they notice that the background
10+
color is not changing and the text shows the following:
11+
12+
Example Code
13+
Hex Code: undefined
14+
undefined is showing up here because
15+
the color variable is not being set correctly.
16+
17+
Fix the error in the darkColorsArr[getRandomIndex]
18+
line so that the color variable is set to a random color
19+
from the darkColorsArr array.
20+

0 commit comments

Comments
 (0)