mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-11 22:01:07 -04:00
feat(curriculum): add first debugging project to JS curriculum (#54622)
This commit is contained in:
Jessica Wilkins
@@ -473,6 +473,13 @@
|
||||
"This will give you an opportunity to solve small problems and get a better understanding of the basics."
|
||||
]
|
||||
},
|
||||
"learn-basic-debugging-by-building-a-random-background-color-changer": {
|
||||
"title": "Learn Basic Debugging by Building a Random Background Color Changer",
|
||||
"intro": [
|
||||
"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."
|
||||
]
|
||||
},
|
||||
"review-dom-manipulation-by-building-a-rock-paper-scissors-game": {
|
||||
"title": "Review DOM Manipulation by Building a Rock, Paper, Scissors Game",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Learn Basic Debugging by Building a Random Background Color Changer
|
||||
block: learn-basic-debugging-by-building-a-random-background-color-changer
|
||||
superBlock: javascript-algorithms-and-data-structures-v8
|
||||
---
|
||||
|
||||
## Introduction to the Learn Basic Debugging by Building a Random Background Color Changer
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-cash-register-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 20,
|
||||
"order": 21,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-palindrome-checker-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 7,
|
||||
"order": 8,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-pokemon-search-app-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 23,
|
||||
"order": 24,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-roman-numeral-converter-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 11,
|
||||
"order": 12,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-telephone-number-validator-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 16,
|
||||
"order": 17,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-advanced-array-methods-by-building-a-statistics-calculator",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 14,
|
||||
"order": 15,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 22,
|
||||
"order": 23,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-algorithmic-thinking-by-building-a-number-sorter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 13,
|
||||
"order": 14,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "Learn Basic Debugging by Building a Random Background Color Changer",
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-debugging-by-building-a-random-background-color-changer",
|
||||
"order": 3,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "javascript-algorithms-and-data-structures-v8",
|
||||
"superOrder": 4,
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "6650c9a94d6e13d14a043a69",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "66323433f931ca32305a11f5",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "663250b42513ef5975599c49",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "663255f28c59315db74d137b",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "66325a250690a3612c1db0f6",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "663260de72634166b0800fe9",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "66326637df347d6ae9928853",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "66326913b729e16dd0127a36",
|
||||
"title": "Step 8"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-oop-by-building-a-shopping-cart",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 17,
|
||||
"order": 18,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-string-and-array-methods-by-building-a-music-player",
|
||||
"order": 5,
|
||||
"order": 6,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-fetch-and-promises-by-building-an-fcc-authors-page",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 21,
|
||||
"order": 22,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-form-validation-by-building-a-calorie-counter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 3,
|
||||
"order": 4,
|
||||
"time": "2 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-functional-programming-by-building-a-spreadsheet",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 15,
|
||||
"order": 16,
|
||||
"time": "2 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-algorithmic-thinking-by-building-a-dice-game",
|
||||
"order": 19,
|
||||
"order": 20,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-oop-by-building-a-platformer-game",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 18,
|
||||
"order": 19,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-localstorage-by-building-a-todo-app",
|
||||
"order": 9,
|
||||
"order": 10,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-modern-javascript-methods-by-building-football-team-cards",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 8,
|
||||
"order": 9,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-recursion-by-building-a-decimal-to-binary-converter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 10,
|
||||
"order": 11,
|
||||
"superOrder": 6,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-regular-expressions-by-building-a-spam-filter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 12,
|
||||
"order": 13,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-the-date-object-by-building-a-date-formatter",
|
||||
"order": 6,
|
||||
"order": 7,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "review-dom-manipulation-by-building-a-rock-paper-scissors-game",
|
||||
"order": 4,
|
||||
"order": 5,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 66323433f931ca32305a11f5
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should fix the capitalization error in the `math.random()` line.
|
||||
|
||||
```js
|
||||
assert.match(getRandomIndex.toString(), /console\.log\(\s*darkColorsArr\.length\s*\*\s*Math\.random\(\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const darkColorsArr = [
|
||||
"#2C3E50",
|
||||
"#34495E",
|
||||
"#2C2C2C",
|
||||
"#616A6B",
|
||||
"#4A235A",
|
||||
"#2F4F4F",
|
||||
"#0E4B5A",
|
||||
"#36454F",
|
||||
"#2C3E50",
|
||||
"#800020",
|
||||
];
|
||||
function getRandomIndex() {
|
||||
--fcc-editable-region--
|
||||
console.log(darkColorsArr.length * math.random())
|
||||
--fcc-editable-region--
|
||||
}
|
||||
getRandomIndex();
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 663250b42513ef5975599c49
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should round `darkColorsArr.length * Math.random()` down to the nearest whole number.
|
||||
|
||||
```js
|
||||
assert.match(getRandomIndex.toString(), /console\.log\(\s*Math\.floor\(\s*darkColorsArr\.length\s*\*\s*Math\.random\(\s*\)\s*\)\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const darkColorsArr = [
|
||||
"#2C3E50",
|
||||
"#34495E",
|
||||
"#2C2C2C",
|
||||
"#616A6B",
|
||||
"#4A235A",
|
||||
"#2F4F4F",
|
||||
"#0E4B5A",
|
||||
"#36454F",
|
||||
"#2C3E50",
|
||||
"#800020",
|
||||
];
|
||||
--fcc-editable-region--
|
||||
function getRandomIndex() {
|
||||
console.log(darkColorsArr.length * Math.random())
|
||||
}
|
||||
getRandomIndex();
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 663255f28c59315db74d137b
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update `queryselector` to use camel case.
|
||||
|
||||
```js
|
||||
assert.match(code, /querySelector/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const darkColorsArr = [
|
||||
"#2C3E50",
|
||||
"#34495E",
|
||||
"#2C2C2C",
|
||||
"#616A6B",
|
||||
"#4A235A",
|
||||
"#2F4F4F",
|
||||
"#0E4B5A",
|
||||
"#36454F",
|
||||
"#2C3E50",
|
||||
"#800020",
|
||||
];
|
||||
function getRandomIndex() {
|
||||
console.log(Math.floor(darkColorsArr.length * Math.random()));
|
||||
const randomIndex = Math.floor(darkColorsArr.length * Math.random());
|
||||
return randomIndex;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const body = document.queryselector("body");
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 66325a250690a3612c1db0f6
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should fix `"bg-hex-code"` so it correctly references the `id` of `bg-hex-code`. Remember that `id` selectors in CSS start with a hash symbol (`#`).
|
||||
|
||||
```js
|
||||
assert.match(bgHexCodeSpanElement.id, /bg-hex-code/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const darkColorsArr = [
|
||||
"#2C3E50",
|
||||
"#34495E",
|
||||
"#2C2C2C",
|
||||
"#616A6B",
|
||||
"#4A235A",
|
||||
"#2F4F4F",
|
||||
"#0E4B5A",
|
||||
"#36454F",
|
||||
"#2C3E50",
|
||||
"#800020",
|
||||
];
|
||||
function getRandomIndex() {
|
||||
const randomIndex = Math.floor(darkColorsArr.length * Math.random());
|
||||
return randomIndex;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const body = document.querySelector("body");
|
||||
const bgHexCodeSpanElement = document.querySelector("bg-hex-code");
|
||||
|
||||
console.log(bgHexCodeSpanElement);
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 663260de72634166b0800fe9
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `getRandomIndex` function inside the `darkColorsArr[getRandomIndex]` line.
|
||||
|
||||
```js
|
||||
assert.match(changeBackgroundColor.toString(), /darkColorsArr\[\s*getRandomIndex\(\s*\)\s*\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
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");
|
||||
|
||||
--fcc-editable-region--
|
||||
function changeBackgroundColor() {
|
||||
const color = darkColorsArr[getRandomIndex];
|
||||
|
||||
bgHexCodeSpanElement.innerText = color;
|
||||
body.style.backgroundColor = color;
|
||||
}
|
||||
changeBackgroundColor();
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 66326637df347d6ae9928853
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should fix the `id` name of `"#click-btn"` line to match the correct `id` name in the `index.html` file.
|
||||
|
||||
```js
|
||||
assert.match(btn.id, /btn/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
const btn = document.querySelector("#click-btn");
|
||||
console.log(btn);
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 66326913b729e16dd0127a36
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not call the `changeBackgroundColor` function. Instead, assign the function reference to the `onclick` property.
|
||||
|
||||
```js
|
||||
assert.strictEqual(btn.onclick, changeBackgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
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");
|
||||
|
||||
--fcc-editable-region--
|
||||
btn.onclick = changeBackgroundColor();
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
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");
|
||||
|
||||
btn.onclick = changeBackgroundColor;
|
||||
|
||||
```
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 6650c9a94d6e13d14a043a69
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should resolve the syntax errors in the `darkColorsArr` array. Remember that array elements should be separated by commas.
|
||||
|
||||
```js
|
||||
assert.isArray(darkColorsArr);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Build a random background color changer</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random Background Color changer</h1>
|
||||
|
||||
<main>
|
||||
<section class="bg-information-container">
|
||||
<p>Hex Code: <span id="bg-hex-code">#110815</span></p>
|
||||
</section>
|
||||
|
||||
<button class="btn" id="btn">Change Background Color</button>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const darkColorsArr = [
|
||||
"#2C3E50",
|
||||
"#34495E",
|
||||
"#2C2C2C"
|
||||
"#616A6B"
|
||||
"#4A235A"
|
||||
"#2F4F4F",
|
||||
"#0E4B5A",
|
||||
"#36454F",
|
||||
"#2C3E50",
|
||||
"#800020",
|
||||
];
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user